How do I move a buttom from behind an image using React Native

Question

I have attached a screen shot of the problem. I can't seem to be able to move my button from behind an image object. I tried zIndex and moving my Views around but I am still getting the same issue. The code seems to only work on IOS but not on Android.

Your assistance will be greatly appreciated. my code is below.

Thank you.

Project Screenshot

import * as React from 'react';
import { StyleSheet, Image, View } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';
import { EvilIcons } from '@expo/vector-icons'

export default class ImagePickerExample extends React.Component {
    state = {
        image: null,
    };

    render() {
        let { image } = this.state;

        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <View style={styles.emptyProfile}>
                    {image && <Image source={{ uri: image }} style={styles.profile} />}
                </View>
                <View style={{ marginLeft: 70, justifyContent: 'center', bottom: 25 }}>
                    <View style={styles.camera}>
                        <EvilIcons name='camera' size={35} color='#fff' onPress={this._pickImage} />
                    </View>
                </View>
            </View>
        );
    }

    componentDidMount() {
        this.getPermissionAsync();
    }
    getPermissionAsync = async () => {
        if (Constants.platform.ios) {
            const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
            if (status !== 'granted') {
                alert('Sorry, we need camera roll permissions to make this work!');
            }
        }
    };

    _pickImage = async () => {
        try {
            let result = await ImagePicker.launchImageLibraryAsync({
                mediaTypes: ImagePicker.MediaTypeOptions.All,
                allowsEditing: true,
                aspect: [4, 4],
                quality: 1,
            });
            if (!result.cancelled) {
                this.setState({ image: result.uri });
            }

            console.log(result);
        } catch (E) {
            console.log(E);
        }
    };
}

const styles = StyleSheet.create({
    camera: {
        backgroundColor: '#fd4336',
        height: 50,
        width: 50,
        borderRadius: 25,
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
    },
    profile: {
        width: 190,
        height: 190,
        borderRadius: 100,
        justifyContent: 'center',
        alignItems: 'center',
    },
    emptyProfile: {
        width: 200,
        height: 200,
        borderRadius: 100,
        backgroundColor: '#c1b78d',
        borderWidth: 5,
        borderColor: '#fff',
        shadowColor: 'black',
        shadowOffset: { width: 0, height: 3 },
        shadowRadius: 3,
        shadowOpacity: 0.3,
        elevation: 5
    }

})

SCREENSHOT

score 0 · Accepted Answer · answered Apr 19 '20 at 17:12

Okay I managed to figure it out! by wrapping another View

 <View style={styles.emptyProfile}>
                {image && <Image source={{ uri: image }} style={styles.profile} />}
                <View style={{ left: 140, position: 'absolute', bottom: 50 }} >
                    <View style={styles.camera}>
                        <EvilIcons name='camera' size={35} color='#fff' onPress={this._pickImage} />
                    </View>
                </View>
            </View>
    );

How do I move a buttom from behind an image using React Native

1 Answers1