CODEWITHSUNDEEP
reactjsreact-nativeflexbox
Mohsen Soleimani
Mohsen Soleimani

Reputation: 35

react native alignments center doesn't work

As I try to put my text in the center of the component it does not work and it's still on the left of the component. I tried to set flex value to its parent view but still does not work. I'm using expo for running the application. The text separately works properly but when I put it in my view it becomes frozen.

In other words, the alignments:'center' doesn't work and I think it not related to attributes.

import React from 'react';
import { StyleSheet, Text, Image,View } from 'react-native';
import { Ionicons } from '@expo/vector-icons'; // 6.2.2
import { Font } from 'expo';


export default class App extends React.Component {
 componentDidMount() {
   Font.loadAsync({
     'iransansblack': require('./IRANSansMobile_Black.ttf'),
   });
 }
render() {
   return (
     <View style={{flex:1,flexDirection:'row',justifyContent:'space-
 around'}}>

     <View style={styles.container}>

       <Image
         source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/cat.gif' }}
         style={{height:null,width:null,flex:1}}
    />
  <Text style=

 {{padding:5,alignItems:'center',fontFamily:'iransansblack'}}>samples</Text>  
  </View>
  <View style={styles.container}>

    /*<Image
      source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/cat.gif' }}
      style={{height:null,width:null,flex:1}}/>*/
      <Ionicons name="md-checkmark-circle" size={32} color="blue" />

   <Text style={{padding:5,alignItems:'center'}}>sample </Text>  
     </View>
     </View>
   );
 }
}

 const styles = StyleSheet.create({
 container: {
   borderWidth: 0,
   borderRadius: 5,
   borderColor: '#ddd',
   borderBottomWidth: 0,
   shadowColor: '#000',
   shadowOffset: { width: 0, height: 0 },
   shadowOpacity: 0.1,
   shadowRadius: 5,
   elevation: 0.5,
   marginLeft: 5,
   marginRight: 5,
   marginTop: 80,
   padding:5,
   width:155,
   height:210,
   flex:1



 },
});

Upvotes: 1

Views: 856

Answers (1)

HungrySoul
HungrySoul

Reputation: 1231

You need to use justifyContent:'center' for Horizontal alignment whereas alignItems:'center is used for vertical alignment.

I hope this answer helped.

Upvotes: 1

Related Questions