I am currently trying to make a design work in React Native inside a Scroll View. The layout works as expected Without a Scroll View but With a Scroll View it gets stretched downwards. Any advice or suggestions will be appreciated. :)
Without ScrollView
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
<View style={{ position: 'absolute', flexDirection: 'column', justifyContent: 'flex-start' }}>
<LinearGradient
start={{ x: 0.0, y: 1.0 }} end={{ x: 1.0, y: 0.0 }}
colors={['#1E2AC0', '#347FC4']}
style={{ height: height * 0.4, width: width }}
/>
<View style={{ height: height * 0.6, width: width, backgroundColor: '#FFFFFF', alignSelf: 'flex-end' }} />
</View>
<View style={{ paddingTop: height*0.6-30, width: width * 0.9, backgroundColor: 'transparent', alignSelf: 'center' }}>
//TextInput and Button
</View>
</View>
This looks the way I want it to look. However, I want the Views to go up when I scroll up. But when I use a scroll view this is what happens at the start. For some reason top gets stretched.
With ScrollView
<ScrollView>
//Same Code as above
</ScrollView>
Related
I have the following code which is used to put a text label right next to a text input inline:
<View style={{ flexDirection: "row", alignItems: "center" }}>
<Text
style={{ fontSize: 16, backgroundColor: "green" }}
>
🇺🇸 +1{" "}
</Text>
<TextInput
style={{
fontSize: 16,
backgroundColor: "red",
flex: 1,
}}
placeholder="Enter your phone number"
/>
</View>
As you can see, I put them in a flex row view, aligning them to the center. For some reason, on Android, you can see the text input has a larger height, despite having the same font size.
There seemed to be some kind of hidden padding so I tried adding padding: 0 but that didn't work either. On iOS, they are the exact same height. Any idea of what I can do here?
To be clear, I want them to be the same height on Android as iOS correctly does. Thank you for your help.
You may add paddingVertical: 0 to style. This will reset the Android native module padding.
<View style={{ flexDirection: "row", alignItems: "center" }}>
<Text
style={{ fontSize: 16, backgroundColor: "green" }}
>
🇺🇸 +1{" "}
</Text>
<TextInput
style={{
fontSize: 16,
backgroundColor: "red",
flex: 1,
paddingVertical: 0
}}
placeholder="Enter your phone number"
/>
</View>
Result
Source: https://stackoverflow.com/a/37882782/20002061
Explanation: In the code below, the main view has a style opacity set to 1 and shadow works perfectly. When I set the opacity to 0.6, shadow makes the view disrupted. Please check the images to see the difference. How do I solve this problem?
Note: I didn't test it on IOS but it looks like this on android.
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
opacity: 1,
}}>
<View
style={{
padding: 20,
borderRadius: 10,
backgroundColor: Colors.white,
shadowColor: '#000',
elevation: 5,
}}>
<Text>Test 123</Text>
</View>
<View></View>
</View>
react-native style opacity for parent and child
return (
<View style={{
flexGrow: 1,
flex: 1,
height: Dimensions.get('window').height,
flexDirection: 'column',
}}>
<ScrollView horizontal={false} contentContainerStyle={{flexGrow: 1}} >
{<View style={{
flex: 1
}}>
<LocationPicker navigation={this.props.navigation} onLocationPicked={this.locationPickedHandler}/>
</View>}
</ScrollView>
</View>);```
I have tried setting height, flex: 1, flexGrow: 1 everything but hard luck
Can anyone please help me in fixing this issue?
React native ScrollView has a horizontal property that arranges its children in a row when set to true.
return (
<View style={{
flex: 1,
height: Dimensions.get('window').height,
flexDirection: 'column',
}}>
<ScrollView horizontal={false} contentContainerStyle={{flexGrow: 1}} >
<View style={{
flex: 1
}}>
<LocationPicker navigation={this.props.navigation} onLocationPicked={this.locationPickedHandler}/>
</View>
</ScrollView>
</View>);
I have a <ScrollView />, wrapped inside an Animatable.View (a wrapper for Animated.View with a few standard animations)
Like this:
<Animatable.View
animation={this.state.businessSlide}
duration={500}
delay={this.state.delay}
useNativeDriver={false}
easing={"ease-in-cubic"}
onAnimationEnd={this.handleBusinessPop}
>
<ScrollView
style={{ width: "100%", alignSelf: "center", height: 175, zIndex: 999 }}
contentContainerStyle={{ alignSelf: "center", justifyContent: "center", alignItems: "center", flexGrow: 1 }}
onScroll={(event) => this.businessScroll(event)}
scrollEventThrottle={16}
>
{this.state.businessMerchants.map((merchant, index) => (
<Business
merchant={merchant}
key={merchant.id}
isCurrentItem={index === this.state.currentItemIndex}
/>
))}
<View style={{ height: 100 }} />
</ScrollView>
</Animatable.View>
The view slides in from the bottom the position.
I believe this is due to some sort of overlap or something, as if I set the translate distance to 0, (i.e. it animates to where it would be normally without the animated view), it scrolls fine.
This only happens on Android, iOS works as expected.
I've create a tab application with a paging horizontal scroll view has 3 pages like this
<ScrollView
showsHorizontalScrollIndicator={false}
style={{ flex: 1 }}
contentContainerStyle={{ height: '100%' }}
pagingEnabled
horizontal>
<View style={{ width, backgroundColor: 'red' }}>
<TextInput style={{ width, backgroundColor: '#FFF', height: 100 }} />
</View>
<View style={{ width, backgroundColor: 'green' }} />
<View style={{ width, backgroundColor: 'blue' }} />
</ScrollView>
As you can see, in the first tab, there's an TextInput, if you enter a long text (about ~50 characters), the scrollview auto scroll and break the UI (see image below)
The issue only happen on low version Android (5.1, 4.4, 4.2), works well on high version and on iOS