Simple and Reusable React Native Radio Button

Creating the RadioButton.tsx component import React from "react"; import {View, Text, SafeAreaView, StyleSheet, TouchableOpacity} from "react-native"; type Props = { isSelected: boolean; onPress: () => void; }; export const RadioButton = (props: Props) => { const {isSelected, onPress} = props; return ( {isSelected && } ) }; const styles = StyleSheet.create({ outer: { height: 24, width: 24, borderRadius: 12, borderWidth: 2, borderColor: "#000", alignItems: "center", justifyContent: "center", }, inner: { height: 12, width: 12, borderRadius: 6, backgroundColor: "#000", }, }); Here's an example of using the : import {registerRootComponent} from "expo"; import React from "react"; import {Text, SafeAreaView, StyleSheet} from "react-native"; import {RadioButton} from "./components/RadioButton"; const App = () => { const [isSelected, setIsSelected] = React.useState(false); return ( Welcome to One Minute Coding! setIsSelected(true)} /> ); }; export default registerRootComponent(App); const styles = StyleSheet.create({ header: { fontSize: 24, fontWeight: "bold", textAlign: "center", height: 50, width: '100%', }, }); Hope this helps! I would love to see how y'all make use of this - please share. Matt

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

type Props = {
  isSelected: boolean;
  onPress: () => void;
};

export const RadioButton = (props: Props) => {
  const {isSelected, onPress} = props;

  return (
    
      {isSelected && }
    
  )
};

const styles = StyleSheet.create({
  outer: {
    height: 24,
    width: 24,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: "#000",
    alignItems: "center",
    justifyContent: "center",
  },
  inner: {
    height: 12,
    width: 12,
    borderRadius: 6,
    backgroundColor: "#000",
  },
});

import {registerRootComponent} from "expo";
import React from "react";
import {Text, SafeAreaView, StyleSheet} from "react-native";
import {RadioButton} from "./components/RadioButton";

const App = () => {
  const [isSelected, setIsSelected] = React.useState(false);

  return (
    
      Welcome to One Minute Coding!

       setIsSelected(true)} />
    
  );
};

export default registerRootComponent(App);

const styles = StyleSheet.create({
  header: {
    fontSize: 24,
    fontWeight: "bold",
    textAlign: "center",
    height: 50,
    width: '100%',
  },
});

Related Posts

How you can celebrate Black History Month with help fro...

Feb 1, 2025  0

RandomResizedCrop in PyTorch (1)

Feb 9, 2025  0

Private, cost-effective cloud storage that you will wan...

Feb 5, 2025  0