React Native text and image side by side alignment issue

Question

I'm trying to adjust the forward icon on bottom right corner and text center aligned horizontally having both in same row.

NOTE: I have local images that works but here I've just used sizes for dummy image URL which is not working

https://snack.expo.io/rkEG55US8 (snack expo runs it properly on iOS but not on android and web)

const styles = StyleSheet.create({
    icon: {
        height: "80%",
        width: "10%",
        marginLeft: "5%",
    },
    forwardIcon: { alignContent: 'flex-end' },
    title: {
        width: '100%', marginTop: -10, fontSize: 24, lineHeight: 28,
        color: '#012169', fontFamily: 'Roboto', textAlign: 'center',
    },
    item: { marginVertical: 10, width: "100%", height: 130, backgroundColor: 'white', alignItems: 'center', },
})


<View style={{ backgroundColor: "#2C4B9F", flex: 1 }}>
    <SafeAreaView style={{ marginTop: 40, marginLeft: 25, marginRight: 25 }}>
        <View>
            <TouchableOpacity style={styles.item} onPress={() => loadInBrowser('http://google.com/')}>
                <Image source={require("http://via.placeholder.com/239x97.png")} />
                <View style={{ flex: 1, }}>
                    <Text style={styles.title}>Long Longer Text<View style={styles.icon}>
                            <Image style={styles.forwardIcon} source={require("http://via.placeholder.com/36x36.png")} />
                        </View>
                    </Text>
                </View>
            </TouchableOpacity>
        </View>

        <View>
            <TouchableOpacity style={styles.item} onPress={() => loadInBrowser('http://google.com/')}>
                <Image style={{marginTop: 5}} source={require("http://via.placeholder.com/147x86.png")} />
                <View style={{ flex: 1, marginTop: 5 }}>
                    <Text style={styles.title}>Smaller Text<View style={styles.icon}>
                            <Image style={styles.forwardIcon} source={require("http://via.placeholder.com/36x36.png")} />
                        </View>
                    </Text>
                </View>
            </TouchableOpacity>
        </View>
    </SafeAreaView>
</View>

Desired.

Actual achieved till now

snack expo runs it properly on iOS but not on android and web — IsmailS, Mar 11 '20 at 17:06

score 0 · Answer 1 · answered Mar 11 '20 at 13:48

0

You cannot centre one element in a two-element flex view. You can make the text centre in the bottom view and make the forward icon position absolute to the bottom right.

answered Mar 11 '20 at 13:48

vr34t

41
2

React Native text and image side by side alignment issue

1 Answers1