Skip to content

Commit

Permalink
feat: enable horizontal scrolling of ScrollView from RN (jeremybarbet…
Browse files Browse the repository at this point in the history
…#121)

* fix: tap on text input clear button on ios

* fix: enable nested horizontal scroll (ScrollView from RN)

* fix: statusbar.currentheight is available on android only

* fix: avoid_keyboard_like_ios should be false on android by default

* feat: modal top offset prop
  • Loading branch information
xxsnakerxx authored and marcin-spotio committed Feb 20, 2020
1 parent d6dc13a commit d33f514
Show file tree
Hide file tree
Showing 8 changed files with 53 additions and 24 deletions.
8 changes: 6 additions & 2 deletions examples/expo/src/components/modals/FixedContent.js
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
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 @@ -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
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
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
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
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
19 changes: 13 additions & 6 deletions src/index.tsx
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,11 +88,8 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
constructor(props: IProps<FlatListItem, SectionListItem>) {
super(props);

const { fromTop } = props;

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

this.initialComputedModalHeight = modalHeight;
Expand Down Expand Up @@ -619,6 +620,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 @@ -726,7 +730,10 @@ avoidKeyboardLikeIOS,
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
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

0 comments on commit d33f514

Please sign in to comment.