react native Scroll View doesn't scroll from inside text input
1
I added multi Text input inside a scroll view. the problem is when I want to scroll down from inside of a text input, I put my finger inside a text input and scroll down but it doesn't scroll down the page, is there a way to fix this?
here is a sample code:
export default class ScrollViewWithTextInput extends React.Component {
render() {
<ScrollView>
<TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/>
<TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/><TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/><TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/>
<TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/>
<TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/><TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/><TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/>
</ScrollView>
}}
const styles = StyleSheet.create({
Container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 8
},
input: {
width: 350,
height: 100,
margin: 5,
borderColor: 'black',
borderWidth: 2,
textAlign: 'right'
}})
reactjs react-native
asked Oct 4 '17 at 12:15
erfan yousefifarerfan yousefifar
62
|
show 1 more comment
1
I added multi Text input inside a scroll view. the problem is when I want to scroll down from inside of a text input, I put my finger inside a text input and scroll down but it doesn't scroll down the page, is there a way to fix this?
here is a sample code:
export default class ScrollViewWithTextInput extends React.Component {
render() {
<ScrollView>
<TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/>
<TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/><TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/><TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/>
<TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/>
<TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/><TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/><TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/>
</ScrollView>
}}
const styles = StyleSheet.create({
Container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 8
},
input: {
width: 350,
height: 100,
margin: 5,
borderColor: 'black',
borderWidth: 2,
textAlign: 'right'
}})
reactjs react-native
asked Oct 4 '17 at 12:15
erfan yousefifarerfan yousefifar
62
we should probably see your code
– Eduard
Oct 4 '17 at 12:47
I added a Sample code, and the strange thing is , when I set textAlign to 'left' things work, it doesn't work on 'center' or 'right'
– erfan yousefifar
Oct 4 '17 at 14:03
1. Probably when the text is aligned to the right or center, the whole input is being considered as "filled with text", but with default "left" position, a TextInput assumes the text to be only where we see it. 2. I checked your app on iOS, the scrolling worked. 3. You are missing return statement in your code.
– Eduard
Oct 4 '17 at 14:26
the problem is present in android, if I remove textAlign and placeholder, it works, if placeholder exist, I should scroll two times and then it works, I think it's a very annoying bug. btw, thank you for your help
– erfan yousefifar
Oct 4 '17 at 15:47
and another thing, no matter if textAlign is set or not, when I use a rtl language, the problem exist
– erfan yousefifar
Oct 4 '17 at 15:49
|
show 1 more comment
1
1
1
I added multi Text input inside a scroll view. the problem is when I want to scroll down from inside of a text input, I put my finger inside a text input and scroll down but it doesn't scroll down the page, is there a way to fix this?
here is a sample code:
export default class ScrollViewWithTextInput extends React.Component {
render() {
<ScrollView>
<TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/>
<TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/><TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/><TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/>
<TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/>
<TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/><TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/><TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/>
</ScrollView>
}}
const styles = StyleSheet.create({
Container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 8
},
input: {
width: 350,
height: 100,
margin: 5,
borderColor: 'black',
borderWidth: 2,
textAlign: 'right'
}})
reactjs react-native
asked Oct 4 '17 at 12:15
erfan yousefifarerfan yousefifar
62
I added multi Text input inside a scroll view. the problem is when I want to scroll down from inside of a text input, I put my finger inside a text input and scroll down but it doesn't scroll down the page, is there a way to fix this?
here is a sample code:
export default class ScrollViewWithTextInput extends React.Component {
render() {
<ScrollView>
<TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/>
<TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/><TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/><TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/>
<TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/>
<TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/><TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/><TextInput
style={styles.input}
placeholder={'توضیحات'}
underlineColorAndroid='transparent'
/>
</ScrollView>
}}
const styles = StyleSheet.create({
Container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 8
},
input: {
width: 350,
height: 100,
margin: 5,
borderColor: 'black',
borderWidth: 2,
textAlign: 'right'
}})
reactjs react-native
reactjs react-native
asked Oct 4 '17 at 12:15
erfan yousefifarerfan yousefifar
62
asked Oct 4 '17 at 12:15
erfan yousefifarerfan yousefifar
62
edited Oct 4 '17 at 14:02
erfan yousefifar
asked Oct 4 '17 at 12:15
erfan yousefifarerfan yousefifar
62
asked Oct 4 '17 at 12:15
erfan yousefifarerfan yousefifar
62
asked Oct 4 '17 at 12:15
erfan yousefifarerfan yousefifar
62
62
we should probably see your code
– Eduard
Oct 4 '17 at 12:47
I added a Sample code, and the strange thing is , when I set textAlign to 'left' things work, it doesn't work on 'center' or 'right'
– erfan yousefifar
Oct 4 '17 at 14:03
1. Probably when the text is aligned to the right or center, the whole input is being considered as "filled with text", but with default "left" position, a TextInput assumes the text to be only where we see it. 2. I checked your app on iOS, the scrolling worked. 3. You are missing return statement in your code.
– Eduard
Oct 4 '17 at 14:26
the problem is present in android, if I remove textAlign and placeholder, it works, if placeholder exist, I should scroll two times and then it works, I think it's a very annoying bug. btw, thank you for your help
– erfan yousefifar
Oct 4 '17 at 15:47
and another thing, no matter if textAlign is set or not, when I use a rtl language, the problem exist
– erfan yousefifar
Oct 4 '17 at 15:49
|
show 1 more comment
we should probably see your code
– Eduard
Oct 4 '17 at 12:47
I added a Sample code, and the strange thing is , when I set textAlign to 'left' things work, it doesn't work on 'center' or 'right'
– erfan yousefifar
Oct 4 '17 at 14:03
1. Probably when the text is aligned to the right or center, the whole input is being considered as "filled with text", but with default "left" position, a TextInput assumes the text to be only where we see it. 2. I checked your app on iOS, the scrolling worked. 3. You are missing return statement in your code.
– Eduard
Oct 4 '17 at 14:26
the problem is present in android, if I remove textAlign and placeholder, it works, if placeholder exist, I should scroll two times and then it works, I think it's a very annoying bug. btw, thank you for your help
– erfan yousefifar
Oct 4 '17 at 15:47
and another thing, no matter if textAlign is set or not, when I use a rtl language, the problem exist
– erfan yousefifar
Oct 4 '17 at 15:49
we should probably see your code
– Eduard
Oct 4 '17 at 12:47
we should probably see your code
– Eduard
Oct 4 '17 at 12:47
I added a Sample code, and the strange thing is , when I set textAlign to 'left' things work, it doesn't work on 'center' or 'right'
– erfan yousefifar
Oct 4 '17 at 14:03
I added a Sample code, and the strange thing is , when I set textAlign to 'left' things work, it doesn't work on 'center' or 'right'
– erfan yousefifar
Oct 4 '17 at 14:03
1. Probably when the text is aligned to the right or center, the whole input is being considered as "filled with text", but with default "left" position, a TextInput assumes the text to be only where we see it. 2. I checked your app on iOS, the scrolling worked. 3. You are missing return statement in your code.
– Eduard
Oct 4 '17 at 14:26
1. Probably when the text is aligned to the right or center, the whole input is being considered as "filled with text", but with default "left" position, a TextInput assumes the text to be only where we see it. 2. I checked your app on iOS, the scrolling worked. 3. You are missing return statement in your code.
– Eduard
Oct 4 '17 at 14:26
the problem is present in android, if I remove textAlign and placeholder, it works, if placeholder exist, I should scroll two times and then it works, I think it's a very annoying bug. btw, thank you for your help
– erfan yousefifar
Oct 4 '17 at 15:47
the problem is present in android, if I remove textAlign and placeholder, it works, if placeholder exist, I should scroll two times and then it works, I think it's a very annoying bug. btw, thank you for your help
– erfan yousefifar
Oct 4 '17 at 15:47
and another thing, no matter if textAlign is set or not, when I use a rtl language, the problem exist
– erfan yousefifar
Oct 4 '17 at 15:49
and another thing, no matter if textAlign is set or not, when I use a rtl language, the problem exist
– erfan yousefifar
Oct 4 '17 at 15:49
|
show 1 more comment
3 Answers
3
active
oldest
votes
1
For some reason setting multiline={true} to the TextInput worked for me.
Not exactly sure why. Stranger still, it will not work if you also have keyboardType='numeric'.
answered Apr 24 '18 at 8:21
Dror BarDror Bar
8528
add a comment |
0
Use each input as a component. try something like this:
<TouchableOpacity onPress={()=>this.input.focus()} >
<View pointerEvents="none" >
<TextInput ref = {(input) => this.input = input} />
</View>
</TouchableOpacity>
This will do the trick
answered Nov 20 '18 at 7:43
NagibabaNagibaba
429513
add a comment |
0
Try to adjust the height of the input.
I don't really understand why but it solved my problem.
answered Feb 12 at 13:20
frostonfroston
40715
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f46564649%2freact-native-scroll-view-doesnt-scroll-from-inside-text-input%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
For some reason setting multiline={true} to the TextInput worked for me.
Not exactly sure why. Stranger still, it will not work if you also have keyboardType='numeric'.
answered Apr 24 '18 at 8:21
Dror BarDror Bar
8528
add a comment |
1
For some reason setting multiline={true} to the TextInput worked for me.
Not exactly sure why. Stranger still, it will not work if you also have keyboardType='numeric'.
answered Apr 24 '18 at 8:21
Dror BarDror Bar
8528
add a comment |
1
1
1
For some reason setting multiline={true} to the TextInput worked for me.
Not exactly sure why. Stranger still, it will not work if you also have keyboardType='numeric'.
answered Apr 24 '18 at 8:21
Dror BarDror Bar
8528
For some reason setting multiline={true} to the TextInput worked for me.
Not exactly sure why. Stranger still, it will not work if you also have keyboardType='numeric'.
answered Apr 24 '18 at 8:21
Dror BarDror Bar
8528
answered Apr 24 '18 at 8:21
Dror BarDror Bar
8528
answered Apr 24 '18 at 8:21
Dror BarDror Bar
8528
answered Apr 24 '18 at 8:21
Dror BarDror Bar
8528
8528
add a comment |
add a comment |
0
Use each input as a component. try something like this:
<TouchableOpacity onPress={()=>this.input.focus()} >
<View pointerEvents="none" >
<TextInput ref = {(input) => this.input = input} />
</View>
</TouchableOpacity>
This will do the trick
answered Nov 20 '18 at 7:43
NagibabaNagibaba
429513
add a comment |
0
Use each input as a component. try something like this:
<TouchableOpacity onPress={()=>this.input.focus()} >
<View pointerEvents="none" >
<TextInput ref = {(input) => this.input = input} />
</View>
</TouchableOpacity>
This will do the trick
answered Nov 20 '18 at 7:43
NagibabaNagibaba
429513
add a comment |
0
0
0
Use each input as a component. try something like this:
<TouchableOpacity onPress={()=>this.input.focus()} >
<View pointerEvents="none" >
<TextInput ref = {(input) => this.input = input} />
</View>
</TouchableOpacity>
This will do the trick
answered Nov 20 '18 at 7:43
NagibabaNagibaba
429513
Use each input as a component. try something like this:
<TouchableOpacity onPress={()=>this.input.focus()} >
<View pointerEvents="none" >
<TextInput ref = {(input) => this.input = input} />
</View>
</TouchableOpacity>
This will do the trick
answered Nov 20 '18 at 7:43
NagibabaNagibaba
429513
answered Nov 20 '18 at 7:43
NagibabaNagibaba
429513
answered Nov 20 '18 at 7:43
NagibabaNagibaba
429513
answered Nov 20 '18 at 7:43
NagibabaNagibaba
429513
429513
add a comment |
add a comment |
0
Try to adjust the height of the input.
I don't really understand why but it solved my problem.
answered Feb 12 at 13:20
frostonfroston
40715
add a comment |
0
Try to adjust the height of the input.
I don't really understand why but it solved my problem.
answered Feb 12 at 13:20
frostonfroston
40715
add a comment |
0
0
0
Try to adjust the height of the input.
I don't really understand why but it solved my problem.
answered Feb 12 at 13:20
frostonfroston
40715
Try to adjust the height of the input.
I don't really understand why but it solved my problem.
answered Feb 12 at 13:20
frostonfroston
40715
answered Feb 12 at 13:20
frostonfroston
40715
answered Feb 12 at 13:20
frostonfroston
40715
answered Feb 12 at 13:20
frostonfroston
40715
40715
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f46564649%2freact-native-scroll-view-doesnt-scroll-from-inside-text-input%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
we should probably see your code
– Eduard
Oct 4 '17 at 12:47
I added a Sample code, and the strange thing is , when I set textAlign to 'left' things work, it doesn't work on 'center' or 'right'
– erfan yousefifar
Oct 4 '17 at 14:03
1. Probably when the text is aligned to the right or center, the whole input is being considered as "filled with text", but with default "left" position, a TextInput assumes the text to be only where we see it. 2. I checked your app on iOS, the scrolling worked. 3. You are missing return statement in your code.
– Eduard
Oct 4 '17 at 14:26
the problem is present in android, if I remove textAlign and placeholder, it works, if placeholder exist, I should scroll two times and then it works, I think it's a very annoying bug. btw, thank you for your help
– erfan yousefifar
Oct 4 '17 at 15:47
and another thing, no matter if textAlign is set or not, when I use a rtl language, the problem exist
– erfan yousefifar
Oct 4 '17 at 15:49