Unsure why button is not in the center in react native

Question

I recently started programming in react native and I'm trying to implement a button located in the bottom center of the screen that will capture an image once it is pressed. Right now when I run the app on my phone, the red button I created is appearing on the left bottom side even though I centered it using alignItems: 'center' in the stylesheet. I tried using right: '50%' in the stylesheet to see if it would appear in the middle of the screen but it didn't. I'm not sure what to do now, here is my code:

import { Camera } from 'expo-camera';
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Button, Alert, TouchableNativeFeedback, Image, SafeAreaView } from 'react-native';




export default function App() {
  const buttonClickedHandler = () => {
    console.log('Picture Taken');
  };


  // Camera Permissions
  const [hasPermission, setHasPermission] = useState(null);
  const [type, setType] = useState(Camera.Constants.Type.back);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <View style={styles.container}>
      <Camera style={styles.camera} type={type} />
      
      //BUTTON
      <TouchableOpacity
          onPress={buttonClickedHandler}
          style={styles.pictureButton}>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  pictureButton: {
    width: 90,
    height: 90,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    borderRadius: 100,
    backgroundColor: 'red',
    position: 'absolute',
    bottom: 20,
  },
  container: {
    flex: 1,
  },
  camera: {
    flex: 1,
  },
  text: {
    fontSize: 18,
    color: 'white',
  },
});

score 1 · Accepted Answer · answered Aug 04 '21 at 20:05

1

Absolute positioned elements are removed from the document flow, so properties like alignItems: 'center' are ignored.

Try using something like this:

 pictureButton: {
    width: 90,
    height: 90,
    padding: 10,
    borderRadius: 100,
    backgroundColor: 'red',
    position: 'absolute',
    bottom: 20,
    left: 50%,
    transform: translateX(-50%),
  }

Here is an in depth explanation on how absolute positioning works

answered Aug 04 '21 at 20:05

Emi C

26
4

Thank you for responding. When I entered the code you provided in, I'm getting an error mainly because of the 'transform: translateX(-50%),'. I'm receiving an Unexpected token error. When I delete the transform part, it works fine but it's still not centered exactly in the middle. Is there something I have import? I tried importing 'translateX' but my expo app keeps crashing once I run it. Any ideas to why transform isn't working? – Soccerball123 Aug 05 '21 at 14:09
Try adding quotes around the translate property `transform: "translateX(-50%)"` – Emi C Aug 05 '21 at 16:47
It's still getting an error, the error is: "Invariant Violation: Invalid prop transform of type string supplied to StyleSheet pictureButton, expected an array." For some reason `transform` and `translate` isn't working, is there something I could replace it with or is there something else I should do? – Soccerball123 Aug 05 '21 at 18:14
You can try adding `display: 'flex'` to the container, and `alignSelf: 'center',` to the button. This thread also has some options: https://stackoverflow.com/questions/37317568/react-native-absolute-positioning-horizontal-centre – Emi C Aug 05 '21 at 18:44

Unsure why button is not in the center in react native

1 Answers1