CODEWITHSUNDEEP
cssreactjsreact-nativejsx
GamerXxX
GamerXxX

Reputation: 35

Alignt TouchableOpacity with flexbox in react native

I have a problem with aligning icons in TouchableOpacity in one row.
This is my code: 

<View style={styles.container12}>
    <View style={styles.sociaContainer}>
        <TouchableOpacity style={styles.socialIcon}
            onPress={() => Linking.openURL('https://www.facebook.com/JelenPivoBiH/?brand_redir=28032575448')}>
            <Icon name="facebook" size={50} color="#fff" />
        </TouchableOpacity>
        <TouchableOpacity style={styles.socialIcon}
            onPress={() => Linking.openURL('https://www.instagram.com/jelenpivo/')}>
            <Icon name="instagram" size={50} color="#fff" />
        </TouchableOpacity>
    </View>
    <Image style={styles.headerImage} source={require('../assets/images/Picture-app2.png')} />
</View>


const styles = StyleSheet.create({
    socialIcon: {
        alignItems: 'center',
        flexDirection: 'row',
        marginLeft: 50,
    },

    container12: {
        flex: 1,
        flexDirection: 'row',
        marginTop: 20,
    },
});

I tried every combination with flex that I know, but it's not working. For every other element it is working, but not in this case.
This is the result:

enter image description here

I want them on one row.

Upvotes: 1

Views: 1238

Answers (1)

SDushan
SDushan

Reputation: 4631

Just a simple style change made your code works. Check this

<View style={styles.container12}>
    {/* <View style={styles.sociaContainer}> */}
    <View style={styles.container12}>
        <TouchableOpacity style={styles.socialIcon}
            onPress={() => Linking.openURL('https://www.facebook.com/JelenPivoBiH/?brand_redir=28032575448')}>
            <Icon name="facebook" size={50} color="#fff" />
        </TouchableOpacity>
        <TouchableOpacity style={styles.socialIcon}
            onPress={() => Linking.openURL('https://www.instagram.com/jelenpivo/')}>
            <Icon name="instagram" size={50} color="#fff" />
        </TouchableOpacity>
    </View>
    <Image style={styles.headerImage} source={require('../assets/images/Picture-app2.png')} />
</View>

Hope this will helps you.

Upvotes: 1

Related Questions