Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable horizontal scrolling of ScrollView from RN #121

Merged
merged 5 commits into from
Jan 31, 2020
Merged

Enable horizontal scrolling of ScrollView from RN #121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8e1f2f9
fix: tap on text input clear button on ios
xxsnakerxx Jan 31, 2020
2de790e
fix: enable nested horizontal scroll (ScrollView from RN)
xxsnakerxx Jan 31, 2020
35b1ed3
fix: statusbar.currentheight is available on android only
xxsnakerxx Jan 31, 2020
6527291
fix: avoid_keyboard_like_ios should be false on android by default
xxsnakerxx Jan 31, 2020
3da9631
feat: modal top offset prop
xxsnakerxx Jan 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions examples/expo/src/components/modals/FixedContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@ export class FixedContent extends React.PureComponent {
<Text style={s.content__subheading}>{'Last step'.toUpperCase()}</Text>
<Text style={s.content__heading}>Send the message?</Text>
<Text style={s.content__description}>{faker.lorem.paragraph()}</Text>
<TextInput style={s.content__input} placeholder="Type your username" />
<TextInput
style={s.content__input}
placeholder="Type your username"
clearButtonMode="while-editing"
/>

<TouchableOpacity style={s.content__button} activeOpacity={0.9} onPress={this.closeModal}>
<Text style={s.content__buttonText}>{'Send'.toUpperCase()}</Text>
Expand All @@ -35,7 +39,7 @@ export class FixedContent extends React.PureComponent {

render() {
return (
<Modalize ref={this.modal} adjustToContentHeight avoidKeyboardLikeIOS>
<Modalize ref={this.modal} adjustToContentHeight>
{this.renderContent()}
</Modalize>
);
Expand Down
10 changes: 6 additions & 4 deletions examples/expo/src/components/modals/SimpleContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import { StyleSheet, Text, View, Dimensions, TextInput } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Iirc I used the ScrollView from RNGH because the one from react native wasn't working on Android. Have you been able to make it work?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know,

minDist={20}
activeOffsetY={20}
activeOffsetX={20}

this fixed ScrollView from RN, check examples

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I use react-native-tab-view inside modalize, these changes make tabs work

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's weird, I've been running your code locally and I wasn't able to scroll. I was running the expo example though. I will give react-navigation a try

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

expo

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about the other scroll view under that you didn't try, which is a vertical scroll view?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, nested vertical RN ScrollView doesn't work on android, but maybe we can document this somehow, smth like, if you want to vertical scroll view inside vertical scroll view on android (that's antipattern, imho), please use ScrollView from RNGH! I think, support of others libraries that use horizontal ScrollView from RN is more important!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh, wait, need to try https://facebook.github.io/react-native/docs/scrollview#nestedscrollenabled

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no, it doen't helps

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good to me!

import { StyleSheet, Text, View, Dimensions, TextInput, ScrollView } from 'react-native';
import { Modalize } from 'react-native-modalize';
import faker from 'faker';

Expand Down Expand Up @@ -38,7 +37,11 @@ export class SimpleContent extends React.PureComponent {
))}
</ScrollView>

<TextInput style={s.content__input} placeholder="Type your username" />
<TextInput
style={s.content__input}
placeholder="Type your username"
clearButtonMode="while-editing"
/>
</View>,
];

Expand All @@ -56,7 +59,6 @@ export class SimpleContent extends React.PureComponent {
showsVerticalScrollIndicator: false,
stickyHeaderIndices: [0],
}}
avoidKeyboardLikeIOS
>
{this.renderContent()}
</Modalize>
Expand Down
7 changes: 5 additions & 2 deletions examples/react-native-navigation/src/screens/FixedContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,11 @@ export class FixedContent extends React.PureComponent {
<Text style={s.content__subheading}>{'Last step'.toUpperCase()}</Text>
<Text style={s.content__heading}>Send the message?</Text>
<Text style={s.content__description}>{faker.lorem.paragraph()}</Text>
<TextInput style={s.content__input} placeholder="Type your username" />
<TextInput
style={s.content__input}
placeholder="Type your username"
clearButtonMode="while-editing"
/>

<TouchableOpacity style={s.content__button} activeOpacity={0.9} onPress={this.closeModal}>
<Text style={s.content__buttonText}>{'Send'.toUpperCase()}</Text>
Expand All @@ -48,7 +52,6 @@ export class FixedContent extends React.PureComponent {
ref={this.modal}
onClosed={this.onClosed}
adjustToContentHeight
avoidKeyboardLikeIOS
>
{this.renderContent()}
</Modalize>
Expand Down
10 changes: 6 additions & 4 deletions examples/react-native-navigation/src/screens/SimpleContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import { StyleSheet, Text, View, Dimensions, TextInput } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import { StyleSheet, Text, View, Dimensions, TextInput, ScrollView } from 'react-native';
import { Navigation } from 'react-native-navigation';
import { Modalize } from 'react-native-modalize';
import faker from 'faker';
Expand Down Expand Up @@ -53,7 +52,11 @@ export class SimpleContent extends React.PureComponent {
))}
</ScrollView>

<TextInput style={s.content__input} placeholder="Type your username" />
<TextInput
style={s.content__input}
placeholder="Type your username"
clearButtonMode="while-editing"
/>
</View>,
];

Expand All @@ -66,7 +69,6 @@ export class SimpleContent extends React.PureComponent {
showsVerticalScrollIndicator: false,
stickyHeaderIndices: [0],
}}
avoidKeyboardLikeIOS
>
{this.renderContent()}
</Modalize>
Expand Down
8 changes: 6 additions & 2 deletions examples/react-navigation/src/components/modals/FixedContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,11 @@ export class FixedContent extends React.PureComponent {
<Text style={s.content__subheading}>{'Last step'.toUpperCase()}</Text>
<Text style={s.content__heading}>Send the message?</Text>
<Text style={s.content__description}>{faker.lorem.paragraph()}</Text>
<TextInput style={s.content__input} placeholder="Type your username" />
<TextInput
style={s.content__input}
placeholder="Type your username"
clearButtonMode="while-editing"
/>

<TouchableOpacity style={s.content__button} activeOpacity={0.9} onPress={this.closeModal}>
<Text style={s.content__buttonText}>{'Send'.toUpperCase()}</Text>
Expand All @@ -35,7 +39,7 @@ export class FixedContent extends React.PureComponent {

render() {
return (
<Modalize ref={this.modal} adjustToContentHeight avoidKeyboardLikeIOS>
<Modalize ref={this.modal} adjustToContentHeight>
{this.renderContent()}
</Modalize>
);
Expand Down
10 changes: 6 additions & 4 deletions examples/react-navigation/src/components/modals/SimpleContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import { StyleSheet, Text, View, Dimensions, TextInput } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import { StyleSheet, Text, View, Dimensions, TextInput, ScrollView } from 'react-native';
import { Modalize } from 'react-native-modalize';
import faker from 'faker';

Expand Down Expand Up @@ -44,7 +43,11 @@ export class SimpleContent extends React.PureComponent {
))}
</ScrollView>

<TextInput style={s.content__input} placeholder="Type your username" />
<TextInput
style={s.content__input}
placeholder="Type your username"
clearButtonMode="while-editing"
/>
</View>,
];

Expand All @@ -56,7 +59,6 @@ export class SimpleContent extends React.PureComponent {
showsVerticalScrollIndicator: false,
stickyHeaderIndices: [0],
}}
avoidKeyboardLikeIOS
>
{this.renderContent()}
</Modalize>
Expand Down
16 changes: 12 additions & 4 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,10 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
ios: true,
android: false,
}),
modalTopOffset: Platform.select({
ios: 0,
android: StatusBar.currentHeight || 0,
}),
panGestureEnabled: true,
closeOnOverlayTap: true,
withReactModal: false,
Expand Down Expand Up @@ -84,9 +88,7 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
constructor(props: IProps<FlatListItem, SectionListItem>) {
super(props);

const fullHeight = isIos
? screenHeight
: screenHeight - (isIos ? StatusBar.currentHeight || 0 : 10);
const fullHeight = screenHeight - props.modalTopOffset!;
const computedHeight = fullHeight - this.handleHeight - (isIphoneX ? 34 : 0);
const modalHeight = props.modalHeight || computedHeight;

Expand Down Expand Up @@ -596,6 +598,9 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
onGestureEvent={Animated.event([{ nativeEvent: { translationY: this.dragY } }], {
useNativeDriver,
})}
minDist={20}
activeOffsetY={20}
activeOffsetX={20}
onHandlerStateChange={this.onHandleChildren}
>
<Animated.View
Expand Down Expand Up @@ -696,7 +701,10 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
ref={this.modal}
maxDurationMs={100000}
maxDeltaY={lastSnap}
enabled={panGestureEnabled}
enabled={Platform.select({
ios: false,
android: panGestureEnabled,
})}
>
<View style={s.modalize__wrapper} pointerEvents="box-none">
{showContent && (
Expand Down
5 changes: 5 additions & 0 deletions src/options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,11 @@ export interface IProps<FlatListItem = any, SectionListItem = any> {
*/
modalHeight?: number;

/**
* A number to define the modal's top offset
*/
modalTopOffset?: number;

/**
* Using this props will show the modal all the time, and the number represents how expanded the modal has to be
*/
Expand Down