touchable opacity size react native code example

Example 1: touchableopacity as button in react native

//React Native Button element doesn't have style props and offers very 
//few customization. Use TochableXXX elements instead.
//TouchableOpacity works fine

import {
  TouchableOpacity,
  Text,
} from "react-native";

<TouchableOpacity
          style={styles.button}
          onPress={this.onSubmit}
          disabled={!this.state.isFormValid}
        >
          <Text style={styles.btnText}>Add
			</Text>
</TouchableOpacity>

const styles = StyleSheet.create({

  button: {
    width: 200,
    marginTop: 20,
    backgroundColor: "green",
    padding: 15,
    borderRadius: 50,
  },
  btnText: {
    color: "white",
    fontSize: 20,
    justifyContent: "center",
    textAlign: "center",
  },
});

Example 2: why touchable opacity to take width of its child

You can actually use alignSelf: 'flex-start' or 'flex-end' depending on which side you want to pin