Aligning button element with image element

Question

is there a way to arrange this layout so that the image is on the left, and the button is on the right?

Right now, it just displays with the image at the top left, and the button that spans the whole width of the screen right below.

Thanks!

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Welcome',
    };

render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Text>
                    Hello, Chat App!
                </Text>


                <Image
                    style={{width: 50, height: 50}}
                    source={getFunction(1)}
                />
                <Button 
                    style={{width: 50, height: 50}}
                    onPress={ () => navigate('Chat', { user: 'Abe', avatar: getFunction(1) })}
                    title = "Chat with Abe"
                />
                <Image
                    style={{width: 50, height: 50}}
                    source={getFunction(2)}
                />                
                <Button 
                    onPress={ () => navigate('Chat', { user: 'Jack', avatar: getFunction(2) })}
                    title = "Chat with Jack"
                />
                <Image
                    style={{width: 50, height: 50}}
                    source={getFunction(3)}
                />                
                <Button 
                    onPress={ () => navigate('Chat', { user: 'Kate', avatar: getFunction(3) })}
                    title = "Chat with Kate"
                />
        );
    }
}

Answer 1

You can try this:

The below code snippet is for alignment of one image and one button.

<View style={{ flex: 1, flex-direction: 'row', justifyContent: 'space-between' }}>
  <View style={{ margin: 15 }} >
   <Image style={{width: 50, height: 50}} source={getFunction(1)} /> 
  </View>

  <View style={{ margin: 15 }} >
   <Button style={{width: 50, height: 50} onPress={ () => navigate('Chat', { 
    user: 'Abe', avatar: getFunction(1) })} title = "Chat with Abe" />
  </View> 

</View>

Cheers :)