Skip to content

Commit 08ed523

Browse files
EQuimperEQuimper
committed
fix(scroll): fix issue with scrolling
1 parent 90e302c commit 08ed523

File tree

4 files changed

+240
-118
lines changed

4 files changed

+240
-118
lines changed

‎README.md‎

Lines changed: 77 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
1-
21
![magicscroll](https://github.com/user-attachments/assets/3ac67386-d41d-47ab-a361-bbaee7e0de0f)
32

43
### About
5-
App & Flow is a Montreal-based React Native engineering and consulting studio. We partner with the world’s top companies and are recommended by [Expo](https://expo.dev/consultants). Need a hand? Let’s build together. [email protected]
4+
5+
App & Flow is a Montreal-based React Native engineering and consulting studio. We partner with the world’s top companies and are recommended by [Expo](https://expo.dev/consultants). Need a hand? Let’s build together. <[email protected]>
66

77
[![npm (scoped)](https://img.shields.io/npm/v/@appandflow/react-native-magic-scroll.svg)](https://www.npmjs.com/package/@appandflow/react-native-magic-scroll)
88

99
## Why react-native-magic-scroll?
10+
1011
The goal of the library is to seamlessly and precisely handle your keyboard, scrollview and inputs when interacting with forms. While other solutions offer plug-and-play functionalities, we wanted to have something more precise and with more flexibility so that it can be used in any situation.
1112

1213
### Examples
14+
1315
We recreated two flows from popular apps to showcase our library in action.
1416
The demo app code is available [here](https://github.com/AppAndFlow/react-native-magic-scroll-demo).
1517

16-
| Twitch's sign up | Shop's check out |
17-
| ------------- | ------------- |
18-
| <video src="https://github.com/AppAndFlow/react-native-magic-scroll-demo/assets/129197567/c1e2b9f4-f66d-4aaf-a57d-9eb4b89400e9"> | <video src="https://github.com/AppAndFlow/react-native-magic-scroll-demo/assets/129197567/4d1a23f2-c55e-414f-a564-4883dfc2c3aa">|
18+
| Twitch's sign up | Shop's check out |
19+
| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
20+
| <video src="https://github.com/AppAndFlow/react-native-magic-scroll-demo/assets/129197567/c1e2b9f4-f66d-4aaf-a57d-9eb4b89400e9"> | <video src="https://github.com/AppAndFlow/react-native-magic-scroll-demo/assets/129197567/4d1a23f2-c55e-414f-a564-4883dfc2c3aa"> |
1921

2022
## Installation
2123

@@ -63,8 +65,6 @@ On Android, make sure to set `android:windowSoftInputMode` in your `AndroidManif
6365
}
6466
```
6567

66-
67-
6868
## Basic Usage
6969

7070
Wrap your screen within our ScrollView.
@@ -74,11 +74,7 @@ import { MagicScroll } from '@appandflow/react-native-magic-scroll';
7474
// rest of your imports
7575

7676
const YourScreen = () => {
77-
return (
78-
<MagicScroll.ScrollView>
79-
// Your form
80-
</MagicScroll.ScrollView>
81-
);
77+
return <MagicScroll.ScrollView>// Your form</MagicScroll.ScrollView>;
8278
};
8379

8480
export default YourScreen;
@@ -97,7 +93,6 @@ const textInputStyle = {
9793
marginTop: 8,
9894
};
9995

100-
10196
const YourScreen = () => {
10297
return (
10398
<MagicScroll.ScrollView>
@@ -127,6 +122,60 @@ const YourScreen = () => {
127122
};
128123
```
129124

125+
You can also use the renderInput function and use any kind of input
126+
127+
```tsx
128+
import { MagicScroll } from '@appandflow/react-native-magic-scroll';
129+
// rest of your imports
130+
131+
const textInputStyle = {
132+
height: 50,
133+
backgroundColor: '#ddd',
134+
borderRadius: 10,
135+
marginTop: 8,
136+
};
137+
138+
const YourAwesomeInput = ({
139+
label,
140+
...props
141+
}: TextInputProps & { label: string }) => {
142+
return (
143+
<View>
144+
<Text>{label}</Text>
145+
<TextInput {...props} />
146+
</View>
147+
);
148+
};
149+
150+
const YourScreen = () => {
151+
return (
152+
<MagicScroll.ScrollView>
153+
<MagicScroll.TextInput
154+
// This is the name of this text input, used by the `chainTo` prop
155+
name="email"
156+
// This is where you can pass your input. You need to spread the prop object. Make sure it is the last prop
157+
renderInput={(magicProps) => (
158+
<YourAwesomeInput label="Email" {...magicProps} />
159+
)}
160+
// This is the function that will make the text input named "password" focused when pressing the Enter or Return key on the device's keyboard
161+
chainTo="password"
162+
textInputProps={{
163+
style: textInputStyle,
164+
}}
165+
/>
166+
<MagicScroll.TextInput
167+
name="password"
168+
renderTop={() => <Text>Password</Text>}
169+
textInputProps={{
170+
secureTextEntry: true,
171+
style: textInputStyle,
172+
}}
173+
/>
174+
</MagicScroll.ScrollView>
175+
);
176+
};
177+
```
178+
130179
## Advanced
131180

132181
As mentioned in the introduction, the drawbacks of a plug-and-play library are its limitations when deviating from standard functionality. That's precisely why our library allows for customization, enabling you to tailor its usage to suit your specific needs and use cases.
@@ -172,23 +221,23 @@ const YourCustomInput = (props: Props) => {
172221
```
173222

174223
## Props (Optional)
175-
All of these props are optional. It is, however, recommended to use them to get the most out of the library.
176224

177-
#### MagicScroll.ScrollView:
225+
All of these props are optional. It is, however, recommended to use them to get the most out of the library.
178226

179-
| Name | Description | Values |
180-
| ---- | ----------- | ------ |
181-
| additionalPadding | adds extra padding between your text input and the keyboard | number |
182-
| scrollViewProps | contains all props of the scrollview from React's Reanimated library | [props](https://reactnative.dev/docs/scrollview#props) |
227+
#### MagicScroll.ScrollView
183228

184-
#### MagicScroll.TextInput:
229+
| Name | Description | Values |
230+
| ----------------- | -------------------------------------------------------------------- | ------------------------------------------------------ |
231+
| additionalPadding | adds extra padding between your text input and the keyboard | number |
232+
| scrollViewProps | contains all props of the scrollview from React's Reanimated library | [props](https://reactnative.dev/docs/scrollview#props) |
185233

186-
| Name | Description | Values |
187-
| ---- | ----------- | ------ |
188-
| chainTo | a string containing the name of the next text input that will be focused when pressing the "Enter Key" | string |
189-
| containerStyle | contains all Style props of the View from React Native | [props](https://reactnative.dev/docs/view-style-props) |
190-
| name | a string to name the current text input, used in the "chainTo" props mentionned above | string |
191-
| renderBottom() | a function that renders components to display custom text under the text input | ```renderBottom={() => <Text>bottomText</Text>}``` |
192-
| renderTop() | a function that renders components to display custom text above the text input | ```renderTop={() => <Text>topText</Text>}``` |
193-
| textInputProps | contains all props of the TextInput component from React Native | [props](https://reactnative.dev/docs/textinput#props) |
234+
#### MagicScroll.TextInput
194235

236+
| Name | Description | Values |
237+
| -------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
238+
| chainTo | a string containing the name of the next text input that will be focused when pressing the "Enter Key" | string |
239+
| containerStyle | contains all Style props of the View from React Native | [props](https://reactnative.dev/docs/view-style-props) |
240+
| name | a string to name the current text input, used in the "chainTo" props mentionned above | string |
241+
| renderBottom() | a function that renders components to display custom text under the text input | `renderBottom={() => <Text>bottomText</Text>}` |
242+
| renderTop() | a function that renders components to display custom text above the text input | `renderTop={() => <Text>topText</Text>}` |
243+
| textInputProps | contains all props of the TextInput component from React Native | [props](https://reactnative.dev/docs/textinput#props) |

0 commit comments

Comments
 (0)