We Keep Coding

React Native (Expo) - Keyboard pushing up screen on Android by default

I am trying to make KeyboardAvoidingView consistent for Android devices. The problem I am experiencing is that, by default, Android seems to resize the screen when the keyboard shows/hide.
This is really confusing to me, why is there a default padding on Android? For example, if you have this simple screen:
<View style={{flex: 1}} >
<View style={{ height: 100, backgroundColor: "red" }} />
<View style={{ flex: 1, backgroundColor: "lime" }} />
<View style={{ height: 125, backgroundColor: "orange" }}>
<TextInput />
</View>
</View>
on iOS, keyboard will cover the screen, as expected, beause I am not using KeyboardAvoidingView here... but on Android, the view is resized, giving a paddingBottom to the view equals to the Keyboard height.
Then, if I use KeyboardAvoidingView like this:
<View style={{ flex: 1 }} >
<KeyboardAvoidingView> { /* <--- Can be my custom or the default RN component... the result is the same */ }
<View style={{ height: 100, backgroundColor: "red" }} />
<View style={{ flex: 1, backgroundColor: "lime" }} />
<View style={{ height: 125, backgroundColor: "orange" }}>
<TextInput />
</View>
</KeyboardAvoidingView>
</View>
all works as expected for iOS... but on Android, two paddings are given (the defaults one, and the one which comes from KeyboardAvoidingView).
Does anyone knows how to disable the default resize on Android (Expo)? I have seen people using
"softwareKeyboardLayoutMode": "pan"
for the android map, on app.json, but nothings happens when using it.
Pd: In my case, I have implemented my own KeyboardAvoidingView (just listening the keyboard height and giving a paddingBottom to the container) to manipulate the layout, because on android, the component which is provided by the standard library "react-native" doesn't shows any smoothy transition on Android when pushing up the screen. I have tested both components, mine and the default one from RN, and the behaviour is the same.

circle outline for fontAwesome icons in react native

I want to use the fontAwesome + icon such that it is in the middle of a circle. I want to use it as one icon item. I read that we can use it along with the circle icon and place it inside that but I couldn't make it work.
import IconFA from 'react-native-vector-icons/FontAwesome';
<IconFA
name="plus"
size={moderateScale(30)}
color="black"
style={styles.thumbnail}
/>
{/* <IconFA
name="circle-thin"
size={moderateScale(67)}
color="white"
/> */}
thumbnail: {
height: 68,
width: 68,
position: 'relative',
},
Alternatively, I read about 'stacked' font awesome icons but couldn't understand how to use it in react native.
Reference: https://jsfiddle.net/1d7fvLy5/1/
Snack Expo:
https://snack.expo.io/9Ild0Q1zG
I want to make something like this:
I am also open to using a <Thumbnail> if I find a similar icon's link but I couldn't find any such free icon online.

The JSFiddle example that you posted creates the circle using a CSS border with border-radius to make it circular. We can do pretty much the same thing in react-native, though borderRadius in react-native can only be a fixed number and not a percent (edit: this limitation is specific to typescript since the borderRadius property has type number. Percentage strings do work at runtime).
You can tweak this code however you want, but this will get the job done. You can use IconFA and CircleBorder as two separate nested components but I also made a component IconInCircle which combines the two.
const IconInCircle = ({ circleSize, borderWidth = 2, borderColor = 'black', ...props}) => (
<CircleBorder
size={circleSize}
borderWidth={borderWidth}
borderColor={borderColor}
>
<IconFA {...props} />
</CircleBorder>
);
const CircleBorder = ({ size, borderWidth, borderColor, children }) => (
<View
style={{
width: size,
height: size,
borderRadius: 0.5 * size,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderColor,
borderWidth,
}}>
{children}
</View>
);
The IconInCircle component takes three props specific to the border: circleSize, borderWidth, and borderColor. All other props are passed through into the IconFA child component.
Basically what we are doing is placing the icon inside of a fixed-size View with a circular border and centered contents.
Now we can use it like so:
<IconInCircle
name="plus"
size={30}
color="black"
style={styles.thumbnail}
borderWidth={1}
circleSize={50}
/>
Expo Link

Try this, just adjust according to your needs, and also don't forget to support other browsers for flex.
const styles = StyleSheet.create({
thumbnail: {
height: 68,
width: 68,
position: 'relative',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
border: '1px solid #333',
borderRadius: '50%'
},
});

import IconFA from 'react-native-vector-icons/FontAwesome';
<View style={{
position:'relative',
justifyContent:'center',
alignItems:'center',
width:40,
height:40,
backgroundColor:'black'
}}>
<IconFA name='circle-thin' size={40} color='grey'/>
<IconFA name='plus' size={20} color='white' style={{position: 'absolute', zIndex: 99}} />
</View>
I am new to ReactNative, but above snippet should work in your case
Snack Expo

Is there a way I can wrap the whole contents of a Text component inside parent view in react-native?

I am creating a screen in react-native where I have to display text on a parent view. How do I make the whole text be displayed?
At first I thought its a problem with text not wrapping, so I tried this solution from one question here
<View style={{flexDirection:'row'}}>
<Text style={{flex: 1, flexWrap: 'wrap'}}> You miss fdddddd dddddddd
You miss fdd
Another line
and another one
</Text>
</View>
I then tried numberOfLines={1}
This is my code
<View style={{ width: '100%', height: '15%', position: 'absolute', alignSelf: 'center', backgroundColor: 'rgba(255, 255, 255, 0.4)', borderRadius: 5, marginTop: '90%', }}>
<Text style={{ width: '80%', backgroundColor: 'transparent', alignSelf: 'center', textAlign: 'center', fontSize: 18, color: '#005F6A', marginTop: '5%' }}>
{`Text the first &
Text the second &
text the third`}
</Text>
</View>
I expect all text to be rendered but only the first line is rendered

Text is rendering correctly but as you have placed the property width=80% it's bounded to wrap the content to the new line. I have used the red color for parent view for more text clarity. Please try to run the below code and let me know if you face any issue. I will try to help you mate.
<View style={{ backgroundColor: 'red', borderRadius: 5 }}>
<Text style={{ backgroundColor: 'transparent',
textAlign: 'center',
fontSize: 18,
color: '#005F6A',
marginTop: '5%'
}}>
Text the first & Text the second & text the third, Text the fourth & text the fifth
</Text>
</View>

how to set center a button on screen - native base

I'm using button of native base library.
this is whole my codes:
<LinearGradient
start={{x: 0.0, y: 0.1}} end={{x: 0.5, y: 1.0}}
locations={[0.2,0.23,0.9]}
colors={[randomColor1,randomColor1, randomColor2]}
style={{flex:1,height:'100%',width:'100%',flexDirection: 'column'}}>
<View style={{width:'100%',height:'100%',flexDirection:'column',flex:1}}>
<View style={{flexDirection:'column',alignItems:'center',justifyContent:'center'}}>
<Text style={{fontSize:22,marginTop:20,color:'#fff',fontWeight:'bold',textAlign:'center'}}>Powerful Composition</Text>
<Button style={{textAlign:'center',justifyContent: 'center',alignItems: 'center',paddingLeft:40,paddingRight:40,marginTop:10,height:40}} light><Text style={{textAlign:'center'}}> JOIN </Text></Button>
</View>
<Text style={{fontSize:18,marginTop:20,color:'#fff',fontWeight:'bold',textAlign:'center',position:'absolute',left:0,bottom:0,marginLeft:6,marginBottom:6}}>607.8 K Votes</Text>
<Text style={{fontSize:18,marginTop:20,color:'#fff',fontWeight:'bold',textAlign:'center',position:'absolute',right:0,bottom:0,marginLeft:6,marginBottom:6,marginRight:4}}>9 Days Left</Text>
</View>
</LinearGradient>
my Text is center of screen. but the Button that is below of it is at the left screen!
where is my wrong?

You need to add the style alignSelf: 'center' to the styles
<Button style={{alignSelf:'center',{/*Other Styles*/}}}> JOIN </Text></Button>

Try justifyContent: 'center' if AlignSelf doesn't work.

Instead of passing a Text element to your Button component you should use the title prop
<Button
style={{
textAlign:'center',
justifyContent: 'center',
alignItems: 'center',
paddingLeft:40,
paddingRight:40,
marginTop:10,
height:40
}}
light
title="JOIN"
/>
You can see in this snack the button is centered

Child view border overrides parent's one on react-native

I have child View inside a Parent View component. I set Parent's border but child View's border override parent's one.
Here is the screen
Here is my code
<View style={{flexDirection: 'row',marginLeft: 20, marginRight: 20, height: height/20,
width: width-40, borderWidth: 2, borderRadius: 4, borderColor: '#D3D3D3'}}>
<View style={{backgroundColor: '#D3D3D3',flexDirection: 'row',
height: height/20, alignItems: 'center'}}>
<Thumbnail style={{marginLeft: 5,width: 20, height: 20}} square source={require('../assets/Turkey.png')}/>
<Picker mode="dropdown" selectedValue={this.state.selectedCountry}
onValueChange={(value)=>this.onCodeChanged(value)}
>
<Picker.Item label="+44" value="England"></Picker.Item>
<Picker.Item label="+90" value="Turkey"></Picker.Item>
</Picker>
</View>
<View style={{height: height/20, width: 250}}>
<Input placeholder="Phone" placeholderTextColor='#D3D3D3'/>
</View>
</View>
I tried to set borderBottomWidth props of child view to 0, but it did not work. Anyone know how can I fix this issue?

Is not the border. You are putting the height of everything (height/20) but you are not taking into account the border you just added, which counts towards the height.
Try something like (height/20 - 4)