Develop Reference

"opacity" breaks the shadow on React Native view

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

React Native: borderRadius and padding styling for nested text

I want to apply a different borderRadius and padding styling to nested texts, but as far as I could understand this is not supported by react native yet. Is there a workaround for this ?
What I tried so far is :
<Text>
<Text
style={{
backgroundColor: 'green',
borderRadius: 12,
}}>
Text1
</Text>
<Text
style={{
backgroundColor: 'blue',
borderRadius: 12,
}}>
Text2
</Text>
</Text>
Expected Result: Text with different backgrounds and with a borderRadius.
Actual Result: backgrounds are differnet but no borderRadius is applied

You can put this code in the text style
<View
style={{
backgroundColor: 'green',
borderRadius: 10,
borderWidth: 1,
borderColor: '#fff',
padding: 10
}}>
<Text>Text1</Text>
</View>

React Native TextInput multiline bottom

I have one TextInput with some predefined text.
The problem is that on Android the text is displayed at the bottom of the text input. I tryed with textAlignVertical: 'top' to display it at top position, but without success the strange thing is that on the IOS is working perfectly
React Native TextInput Multiline
multiline
If true, the text input can be multiple lines. The default value is false. It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with textAlignVertical set to top for the same behavior in both platforms.
current behaviour:
the text is displayed at the bottom
desired behaviour:
the text to be displayed at the top
index.js
render() {
return (
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
paddingTop: 20,
paddingBottom: 50,
paddingLeft: 20,
paddingRight: 20}}>
<TextInput
style={{
flex: 1,
textAlignVertical: 'top',
borderWidth: 1}}
autoCapitalize={'none'}
autoCorrect={false}
value={this.state.textTabs}
multiline={true}
onChangeText={(text) => {this.setState({textTabs: text})}}
underlineColorAndroid={'transparent'}
editable={true}
/>
</View>
);}
Thanks in advance

Nested Text component containing whitespace is not displayed when positioned at the end of a line

I'm trying to have a placeholder made of whitespace inside a text. It works fine when the placeholder is at the beginning of a line or in the middle, but it is not rendered at all when positioned at the end of a line.
<Container>
<View>
<Text style={{fontSize: 18}}>
<Text style={{ backgroundColor: 'pink' }}>
This TEXT is the first part of the sentence
</Text>
<Text style={{ backgroundColor: 'black' }}>{' '}</Text>
<Text style={{ backgroundColor: 'green' }}>
This is the second part
</Text>
</Text>
</View>
</Container >
Normal behaviour:
Strange behaviour:
Context:
running on Android
versions: "react": "16.8.3", "react-native": "0.59.8",
Edit: Solved my problem by replacing the normal space characters with "\u00a0" characters, aka 'non-breaking space'

So looking at other answers, it looks like the fix is a bit dirty Answer Here
So here's what I did:
<View>
<Text style={{fontSize: 18}}>
<Text style={{ backgroundColor: 'pink' }}>
This TEXT is the first part of the sentence
</Text>
</Text>
<View style={{flexDirection: 'row'}}>
<Text style={{ backgroundColor: 'black', fontSize: 18 }}>{' '}</Text>
<Text style={{ backgroundColor: 'green', fontSize: 18 }}>
This is the second part
</Text>
</View>
</View>
and here's a snack example
Hope this helps!

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).