'React native: How to have components in right and left side of the screen

I have a chat app in react native. It is kinda like

<ScrollView style={styles.scrollArea}>
                {
                    userMessagesSent.map((item, index) =>
                        <SafeAreaView style={item.sentBy == "user" ? styles.userMessageAreaView : styles.botMessageAreaView}>
                            <Text style={item.sentBy == "user" ? styles.usersMessage : styles.botMessage}>{item.content}</Text>
                        </SafeAreaView>
                    )
                }
                </ScrollView>```
So in that SafeAreaView, in that Text component, if item.sentBy == "user" I want the Text to be in the right side of the screen, otherwise I want it to  be at left side of the screen. How can I do that? 


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source