ReactNative - Button Not Visible

user_6829224 0
Viewed 39

I'm having an issue where I'm creating a simple button that isn't visible (but it is there because I'm able to trigger the onPress method) within this view, but I am able to create other components within this View that appear. My code in App.js is below, any help would be greatly appreciated!

import React from 'react';
import { 
  View, 
  StyleSheet,
  Text,
  TouchableOpacity,
} from 'react-native';


export default function App() {
  return (
    <View style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}>
      <TouchableOpacity style={styles.button} onPress={() => console.log("Clicked")}>
            <Text style={styles.text}>Login</Text>
      </TouchableOpacity>
     </View>
  );
}

const styles = StyleSheet.create({
  button: {
      color: "tomato",
      borderRadius: 25,
      justifyContent: "center",
      alignItems: "center",
      padding: 15,
      height: 50,
      width: "100%",
  },
  text: {
      color: "#fff",
      fontSize: 18,
      fontWeight: "bold",
      textTransform: "uppercase",
  }
})
react-native
2 Answers

You have a white button with white text in front of a white background so it all blends in. Look at this expo snack and the code below to see why (https://snack.expo.dev/@heytony01/thankful-juice-box)

import React from 'react';
import { 
  View, 
  StyleSheet,
  Text,
  TouchableOpacity,
} from 'react-native';


export default function App() {
  return (
    <View style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}>
      <TouchableOpacity style={styles.button} onPress={() => console.log("Clicked")}>
            <Text style={styles.text}>Login</Text>
      </TouchableOpacity>
     </View>
  );
}

const styles = StyleSheet.create({
  button: {
      borderColor:"red", // give border color
      borderWidth:2, // give border width
      color: "tomato",
      borderRadius: 25,
      justifyContent: "center",
      alignItems: "center",
      padding: 15,
      height: 50,
      width: "100%",
  },
  text: {
      color: "black",  // change font to black
      fontSize: 18,
      fontWeight: "bold",
      textTransform: "uppercase",
  }
})
user_170289700

I was setting the color of the button instead of the backgroundColor

user_68292240
Related