@geekofia/react-native-components
v0.1.0
Published
Simple Yet Essential React Native Components
Downloads
22
Maintainers
Readme
React Native Components
This package is built to provide very minimal type enforced simple pure react-native components without any other dependencies.
installation
npm i @geekofia/react-native-components # --location=global or local accordingly
components
- [x] Radio
- [x] RadioGroup
- [ ] CheckBox
- [ ] CheckBoxGroup
usage
import React from "react";
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
} from "react-native";
import { RadioGroup } from "@geekofia/react-native-components";
const data = [
{
label: "Option 1",
value: "option1",
},
{
label: "Option 2",
value: "option2",
},
{
label: "Option 3",
value: "option3",
},
];
const App = () => {
const isDarkMode = useColorScheme() === "dark";
const [selection, setSelection] = React.useState<string>("");
const backgroundStyle = {
flexGrow: 1,
backgroundColor: isDarkMode ? "#252525" : "#ededed",
};
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar
animated={true}
backgroundColor={isDarkMode ? "#252525" : "#ededed"}
barStyle={isDarkMode ? "light-content" : "dark-content"}
/>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}
>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Radio Group</Text>
<Text style={styles.selectedText}>
{selection ? selection : "Nothing"} selected
</Text>
<RadioGroup
options={data}
selected={selection}
setSelection={setSelection}
radioGroupStyle={styles.radioGroupStyle}
radioContainerStyle={styles.radioContainerStyle}
radioLabelStyle={styles.radioLabelStyle}
darkMode={isDarkMode}
/>
</View>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: "600",
},
selectedText: {
textAlign: "center",
fontSize: 18,
marginTop: 16,
backgroundColor: "#0091ea",
padding: 8,
textTransform: "capitalize",
},
radioGroupStyle: {
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "space-evenly",
marginVertical: 16,
},
radioContainerStyle: { padding: 4 },
radioLabelStyle: {
fontSize: 16,
marginLeft: 8,
},
});
Screenshots
The above example code has following output (with minimal styling):
More examples can be found in example folder.