CODEWITHSUNDEEP
reactjsreact-native
Jithin Varghese
Jithin Varghese

Reputation: 2228

cannot place an image to right side react native

I have an image and it should be placed at right side of the header. I have tried and it is working perfectly in android devices. But in IOS the image is showing at left side. Please check my code,

export default class Header extends Component {
constructor(props) {
    super(props);
}

render() {
    return (
        <View style={styles.header}>
            <View style={styles.logoContainer}>
                <Text style={{textAlign: 'right'}}>
                    <Image
                        style={styles.logo}
                        resizeMode={'contain'}
                        source={require('../../../../assets/logo.png')}
                    />
                </Text>
                <TouchableOpacity
                    onPress={() =>
                        this.props.navigation.navigate('AffiliateInfo')
                    }
                >
                    <Text style={{textAlign: 'right'}}>
                        <Image
                            style={styles.agile}
                            source={require('../../../../assets/agile.png')}
                        />
                    </Text>
                </TouchableOpacity>
            </View>
            <Image
                style={styles.navImage}
                source={require('../../../../assets/nav.png')}
            />
        </View>
    );
}
}

const styles = StyleSheet.create({
header: {
    backgroundColor: '#0d2c4f',
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 30,
    paddingBottom: 30,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end'
},
logoContainer: {
    flex: 1
},
logo: {
    width: 200,
    height: 50,
    resizeMode: 'contain'
},
agile: {
    width: 100,
    height: 30,
    resizeMode: 'contain'
},
navImage: {
    width: 40,
    height: 15,
    resizeMode: 'contain',
    marginLeft: 20
}
});

The logo.png and agile.png image should be placed at right side. Is there anything to be done in IOS. Any solution will be appreciated. I am really stuck in here.

Upvotes: 0

Views: 4012

Answers (1)

hong developer
hong developer

Reputation: 13926

You can use alignItems

< View style={{ alignItems: 'flex-end', width: 100, height: 30 }} >
  <Image
    style={styles.agile}
    source={require('../../../../assets/agile.png')}
  />
< View />

Upvotes: 2

Related Questions