Develop Reference

React Native Text Input Has Hidden Padding On Android

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

React Native - can't scroll inside ScrollView wrapped inside animated view on Android

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.

Making design work in Scroll View in React-Native

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>

How do I make a React Native Image component adjust view bounds on Android?

I have the following Image component paired with two Text elements in a React Native flexbox:
<View
style={{
flex: 1,
flexDirection: 'row',
}}>
<Image
style={{
width: 100,
height: undefined,
margin: 4,
// borderWidth: 1,
// borderColor: '#777',
}}
source={{uri: image.url}}
resizeMode='center'
/>
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-start'}}>
<Text style={styles.title}>{article.promotionContent.title.value}</Text>
<Text style={styles.description}>{article.promotionContent.description.value}</Text>
</View>
</View>
It porduces this output when implemented as above:
However I suspect that it doesn't adjust view bounds since I get white space above the image (it's supposed to align to the top) and if I add borders to the View, i.e. uncommenting the two lines, I get this weird artifact:
Have anyone else experienced this?
If you want to test my project, check out commit 3a3f705c271a0b523a1769536d16984c5dd47233 in this repo
My question is somewhat laden with assumptions. My end goal is to rescale height after having set a constant width, add border and top align.

RefreshControl 'stealing' move gesture from ViewPagerAndroid

If I have a ViewPagerAndroid inside of a ScollView with RefreshControl enabled, the RefreshControl will steal the pan movement from the ViewPagerAndroid.
What I mean is, by dragging the ViewPager to the left midway and then, without releasing the touch, start to drag down, the RefreshContorl will activate, appearing and resetting the state of the ViewPager.
I tried to disable the RefreshControl as soon as the ViewPager returns something other than idle, but if the swipe is quick enough (which usually is), the update does not happen on time to stop the RefreshControl from appearing.
My layout is as simple as possible:
<View style={styles.container}>
<ScrollView style={{ flex: 1 }} removeClippedSubviews={true}>
<View style={{ height: 500, width: 350, marginBottom: 15, backgroundColor: 'cyan' }}>
<ViewPagerAndroid style={{ flex: 1 }}>
<View><Text style={{ fontSize: 30 }}>{'Page1'}</Text></View>
<View><Text style={{ fontSize: 30 }}>{'Page2'}</Text></View>
</ViewPagerAndroid>
</View>
<View style={{ height: 500, width: 350, marginBottom: 15, backgroundColor: 'lightblue' }}>
<ViewPagerAndroid style={{ flex: 1 }}>
<View><Text style={{ fontSize: 30 }}>{'Page1'}</Text></View>
<View><Text style={{ fontSize: 30 }}>{'Page2'}</Text></View>
</ViewPagerAndroid>
</View>
</ScrollView>
</View>
I'm using a Mac, react-native version 0.27.2

You're having ViewPagerAndroid in ScrollView, it should be the other way round.
btw. I'm using scrollable tabview with refreshcontrol and it works well. It doesn't use ViewPagerAndroid, as far as I know, but it's crossplatform and performs well (after disabling dev mode and reloading).