Develop Reference

Center element horizontally in React Native

I want to center a button horizontally, this is my code:
return (
<View style={styles.root}>
<View style={styles.container}>
<SafeAreaView style={HEADER}>
<SliderBox
style={{ height: '100%' }}
currentImageEmitter={index => setCurrentSliderNumber(index)}
images={data.images}>
</SliderBox>
</SafeAreaView>
{currentSliderNumber == data.images.length - 1 ? <View style={styles.item}>
<Button
style={styles.getStartedButton}
appearance="ghost"
status="control"
onPress={onGetStartedPressed}
>
Get Started
</Button>
</View> : null}
</View>
</View>
)
and this is my styling:
const styles = StyleSheet.create({
forgotPasswordButton: {
paddingHorizontal: 0,
},
root: {
flex: 1,
height: '100%',
backgroundColor: '#fff'
},
container: {
borderColor: 'rgba(0,0,0,0.2)',
},
getStartedButton: {
marginVertical: 12,
backgroundColor: 'red'
},
item: {
borderColor: 'rgba(0,0,0,0.2)',
position: 'absolute',
top: '80%',
left: '50%'
}, text: {
position: 'absolute',
top: '30%',
left: '10%'
}
})
I also tried to add alingnItems:center to root:
root: {
flex: 1,
height: '100%',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}
But the result is not the one expected:

Try changing the item style object to this:
item: {
borderColor: 'rgba(0,0,0,0.2)',
position: 'absolute',
top: '80%',
left:0,
width:"100%",
alignItems:"center",
justifyContent:"center"
},

Do not use position until it's necessary you should use flex properties.
return (
<View style={styles.root}>
<View style={styles.container}>
<SafeAreaView style={HEADER}>
<SliderBox
style={{ height: '100%' }}
currentImageEmitter={index => setCurrentSliderNumber(index)}
images={data.images}>
</SliderBox>
</SafeAreaView>
{currentSliderNumber == data.images.length - 1 ? <View style={styles.item}>
<Button
style={styles.getStartedButton}
appearance="ghost"
status="control"
onPress={onGetStartedPressed}
>
Get Started
</Button>
</View> : null}
</View>
</View>
)
Styles
const styles = StyleSheet.create({
forgotPasswordButton: {
paddingHorizontal: 0,
},
root: {
flex: 1,
height: '100%',
backgroundColor: '#fff'
},
container: {
borderColor: 'rgba(0,0,0,0.2)',
flexGrow:1,
justifyContent: "space-between"
},
getStartedButton: {
marginVertical: 12,
backgroundColor: 'red',
alignSelf:"center",
flexGrow:2,
},
item: {
borderColor: 'rgba(0,0,0,0.2)',
flexGrow:1,
justifyContent:"center",
alignItem:"center",
}, text: {
}
})
Check out the layout docs

React Native – Make View bigger than container View

I need to implement such two Views:
enter image description here
I made it this way:
<View
style={{
backgroundColor: colors.bigStone,
height: 2,
width: '100%',
}}>
<View style={styles.bluePoint} />
</View>
const styles = StyleSheet.create({
bluePoint: {
alignSelf: 'center',
backgroundColor: colors.bluePoint,
borderRadius: 64,
height: 4,
justifyContent: 'flex-start',
marginBottom: 2,
width: 4,
},
}
But it looks this way:
enter image description here
How can I center it?
Adding margin and padding doesn't help.
As I think, my view can't go upper of the top of its container.

Try this
<View style={styles.container}>
<View style={styles.separatorWrap}>
<View style={[styles.separator, styles.marginright]}/>
<Text style={styles.separatorText}><Avatar.Icon size={36} /></Text>
<View style={[styles.separator, styles.marginleft]}/>
</View>
</View>
i used react-native-paper icons you can use something else also
container: {
backgroundColor: "red",
flex: 1,
justifyContent: 'space-between',
},
separatorWrap: {
paddingVertical: 10,
flexDirection: "row",
alignItems: "center",
},
separator: {
borderBottomWidth: 15,
flexGrow: 1,
borderColor: "#8BDA9F",
},
separatorText: {
color: "#eee",
fontSize: 13,
zIndex:1
},
marginright:{
marginRight: -20
},
marginleft:{
marginLeft: -20
}
Example working code: https://snack.expo.io/nbAKOYFlr
Output :

How can I achieve to have active pointy/arrow/triangle tabs on React Native?

It seems to be as if I need to use some extra css in order to achieve what you will see below:
I already have this component:
renderTabBar = props => (
<View style={tabViewStyles.tabBar}>
{props.navigationState.routes.map((route, i) => {
return (
<TouchableOpacity
key={route.key}
style={[
tabViewStyles.tabItem,
tabViewStyles.tabStyle,
tabViewStyles[`tabStyle_${i}`],
]}
onPress={() => this.setState({ index: i })}
>
<Text style={{ color: '#ffffff', fontFamily: 'montserratBold' }}>
{route.title}
</Text>
</TouchableOpacity>
);
})}
</View>
);
With this css on StyleSheet:
container: {
flex: 1,
},
tabBar: {
flexDirection: 'row',
paddingTop: Constants.statusBarHeight,
},
onWhite: {
color: globalStyles.whiteColor.color,
backgroundColor: globalStyles.whiteColor.backgroundColor,
},
bolderFont: {
fontFamily: 'montserratBold',
},
tabItem: {
flex: 1,
alignItems: 'center',
padding: 26,
},
tabStyle: {
marginHorizontal: 10,
marginTop: 20,
borderRadius: 2,
},
tabStyle_0: {
backgroundColor: '#ff5252',
},
tabStyle_1: {
backgroundColor: '#3da7dc',
},
});
With that above I get this:
So I am still missing the pointy part of the tab.
What else do I need to do?

You can use rotate property of Transforms as described here.
Minimal example:
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<View style={{width:50,height:50,backgroundColor:'green'}}></View>
<View style={{transform:[{rotateZ:'45deg'}],width:8,height:8,backgroundColor:'green',marginTop:-4}}></View>
</View>
Snack example here

If you want a pure styled solution and not an image you could do the following:
const triangle = {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth: 50,
borderRightWidth: 50,
borderBottomWidth: 100,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: '#ff5252',
transform: [
{rotate: '180deg'}
]
}
const Triangle = React.createClass({
render: function() {
return (
<View style={[triangle, this.props.style]} />
)
}
})
Modified from https://codedaily.io/tutorials/22/The-Shapes-of-React-Native.

how to centre the image inside a view in react native

I have a grid view, inside each cell I have added a view and then an image , the image isn't centered the code is as follows
<ImageBackground
source={require('./images/marble.jpg')}
style={styles.backgroundImage}>
<GridView
itemDimension={130}
items={items}
style={styles.gridView}
renderItem={item => (
<View style={[styles.itemContainer, { backgroundColor: item.code }]}>
<View style={styles.CircleShapeView}>
<Image style={styles.iconItem} source={item.name}/>
</View>
</View>
)}
/>
</ImageBackground>
and styles are
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover', // or 'stretch'
},
CircleShapeView: {
width: 100,
height: 100,
borderRadius: 100,
backgroundColor: '#00BCD4'
},
gridView: {
paddingTop: 50,
flex: 1,
},
itemContainer: {
justifyContent: 'center',
alignItems:'center',
height:130
},
iconItem: {
alignItems:'center',
justifyContent: 'center'
}
});
the output looks like this
Image should be at the centre of the circle, but its not.

Your image is inside a view 'CircleShapeView'
CircleShapeView: {
width: 100,
height: 100,
borderRadius: 100,
backgroundColor: '#00BCD4',
justifyContent: 'center',
alignItems: 'center'
}

set in view
justifycontent:center
alignitems:center

How do make textinput background transparent on map on react-native

How can I make the outer textinput background transparent so that it look like its inside the map, not on top? Thanks in advance!
<View style={styles.container}>
<TextInput style={styles.input}/>
<MapView style={styles.map}/>
</View>
var styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
map: {
flex: 1,
},
input: {
height: 36,
padding: 10,
margin: 18,
fontSize: 18,
borderWidth: 1,
borderRadius: 10,
borderColor: '#48BBEC',
backgroundColor: 'rgba(0,0,0,0)',
}
})

Finally got it answer! Thanks to jpea!
<View style={styles.container}>
<MapView style={styles.map}/>
<View style={styles.inputView}>
<TextInput style={styles.input}/>
</View>
</View>
var styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
map: {
flex: 1,
},
inputView: {
backgroundColor: 'rgba(0,0,0,0)',
position: 'absolute',
top: 0,
left: 5,
right: 5
},
input: {
height: 36,
padding: 10,
marginTop: 20,
marginLeft: 10,
marginRight: 10,
fontSize: 18,
borderWidth: 1,
borderRadius: 10,
borderColor: '#48BBEC',
backgroundColor: 'white',
}
})

Try wrapping your text input in another view and setting that view's background to transparent:
<View style={styles.container}>
<MapView style={styles.map}/>
<View style={styles.inputWrapper}>
<TextInput style={styles.inputSearch}/>
</View>
</View>
inputWrapper: {
flex: 1,
backgroundColor: 'transparent',
position: 'absolute',
top: 0,
},
inputSearch: {
backgroundColor: 'rgba(0,0,0,0.4)', // 40% opaque
color: 'white',
}