|
1 | | -import React from "react"; |
2 | | -import { View, Text, StatusBar, SafeAreaView, Pressable } from "react-native"; |
3 | | -import AppleHeader from "react-native-apple-header"; |
4 | | -import BottomSearchBar from "react-native-bottom-search-bar"; |
5 | | -import BouncyCheckbox from "react-native-bouncy-checkbox"; |
6 | | -import MultipleCheckboxes from "./multipleCheckboxes/multiple-checkboxes.component"; |
| 1 | +import React from 'react'; |
| 2 | +import {View, Text, StatusBar, SafeAreaView, Pressable} from 'react-native'; |
| 3 | +import AppleHeader from 'react-native-apple-header'; |
| 4 | +import BottomSearchBar from 'react-native-bottom-search-bar'; |
| 5 | +import BouncyCheckbox from './lib/BouncyCheckbox'; |
7 | 6 |
|
8 | 7 | export default class App extends React.Component { |
9 | 8 | render() { |
10 | 9 | return ( |
11 | | - <View style={{ flex: 1 }}> |
| 10 | + <View style={{flex: 1}}> |
12 | 11 | <StatusBar barStyle="dark-content" /> |
13 | | - <SafeAreaView style={{ flex: 1 }}> |
| 12 | + <SafeAreaView style={{flex: 1}}> |
14 | 13 | <AppleHeader /> |
15 | | - <View style={{ margin: 16 }}> |
16 | | - <MultipleCheckboxes /> |
17 | | - <View style={{ margin: 8 }}> |
| 14 | + <View style={{margin: 16}}> |
| 15 | + <View style={{margin: 8}}> |
18 | 16 | <BouncyCheckbox |
19 | 17 | size={25} |
20 | 18 | fillColor="red" |
21 | 19 | TouchableComponent={Pressable} |
22 | | - textStyle={{ fontFamily: "JosefinSans-Regular" }} |
23 | | - iconStyle={{ borderColor: "red" }} |
| 20 | + textStyle={{fontFamily: 'JosefinSans-Regular'}} |
| 21 | + iconStyle={{borderColor: 'red'}} |
| 22 | + disableText={false} |
24 | 23 | unfillColor="#FFFFFF" |
25 | 24 | text="Custom Checkbox with Pressable Component" |
26 | 25 | onPress={(isChecked: boolean) => {}} |
27 | 26 | /> |
28 | 27 | </View> |
29 | | - <View style={{ margin: 8 }}> |
| 28 | + <View style={{margin: 8}}> |
30 | 29 | <BouncyCheckbox |
31 | 30 | disabled |
32 | 31 | isChecked={false} |
33 | | - iconStyle={{ borderColor: "blue", borderRadius: 10 }} |
34 | | - textStyle={{ fontFamily: "JosefinSans-Regular" }} |
| 32 | + iconStyle={{borderColor: 'blue', borderRadius: 10}} |
| 33 | + textStyle={{fontFamily: 'JosefinSans-Regular'}} |
35 | 34 | unfillColor="white" |
36 | 35 | text="Custom Disabled Checkbox Example" |
37 | 36 | onPress={(isChecked: boolean) => {}} |
38 | 37 | /> |
39 | 38 | </View> |
40 | | - <View style={{ margin: 8 }}> |
| 39 | + <View style={{margin: 8}}> |
41 | 40 | <BouncyCheckbox |
42 | 41 | text="Call my mom 😇" |
43 | | - textStyle={{ fontFamily: "JosefinSans-Regular" }} |
| 42 | + textStyle={{fontFamily: 'JosefinSans-Regular'}} |
44 | 43 | onPress={(checked: boolean) => {}} |
45 | 44 | /> |
46 | 45 | </View> |
47 | | - <View style={{ margin: 8 }}> |
| 46 | + <View style={{margin: 8}}> |
48 | 47 | <BouncyCheckbox |
49 | 48 | isChecked |
50 | 49 | text="Get groceries" |
51 | | - textStyle={{ fontFamily: "JosefinSans-Regular" }} |
| 50 | + textStyle={{fontFamily: 'JosefinSans-Regular'}} |
52 | 51 | onPress={(isChecked: boolean) => {}} |
53 | 52 | /> |
54 | 53 | </View> |
55 | | - <View style={{ margin: 8 }}> |
| 54 | + <View style={{margin: 8}}> |
56 | 55 | <BouncyCheckbox |
57 | 56 | isChecked |
58 | 57 | text="Pay the bills" |
59 | | - textStyle={{ fontFamily: "JosefinSans-Regular" }} |
| 58 | + textStyle={{fontFamily: 'JosefinSans-Regular'}} |
60 | 59 | onPress={(isChecked: boolean) => {}} |
61 | 60 | /> |
62 | 61 | </View> |
63 | | - <View style={{ margin: 8 }}> |
| 62 | + <View style={{margin: 8}}> |
64 | 63 | <BouncyCheckbox |
65 | 64 | text="Take out of the trash 💩" |
66 | | - textStyle={{ fontFamily: "JosefinSans-Regular" }} |
| 65 | + textStyle={{fontFamily: 'JosefinSans-Regular'}} |
67 | 66 | onPress={(isChecked: boolean) => {}} |
68 | 67 | /> |
69 | 68 | </View> |
70 | | - <View style={{ margin: 8 }}> |
| 69 | + <View style={{margin: 8}}> |
71 | 70 | <BouncyCheckbox |
| 71 | + disableText={false} |
72 | 72 | text="Buy tickets for concert 🎉 🎊" |
73 | | - textStyle={{ fontFamily: "JosefinSans-Regular" }} |
| 73 | + textStyle={{fontFamily: 'JosefinSans-Regular'}} |
74 | 74 | onPress={(isChecked: boolean) => {}} |
75 | 75 | /> |
76 | 76 | </View> |
77 | | - <View style={{ margin: 8 }}> |
| 77 | + <View style={{margin: 8}}> |
78 | 78 | <BouncyCheckbox |
79 | 79 | isChecked |
80 | 80 | text="Try new gym routine" |
81 | 81 | textStyle={{ |
82 | | - fontFamily: "JosefinSans-Regular", |
83 | | - color: "red", |
84 | | - textDecorationLine: "none", |
| 82 | + fontFamily: 'JosefinSans-Regular', |
| 83 | + color: 'red', |
| 84 | + textDecorationLine: 'none', |
85 | 85 | }} |
86 | 86 | onPress={(isChecked: boolean) => {}} |
87 | 87 | /> |
88 | 88 | </View> |
89 | | - <View style={{ margin: 8 }}> |
| 89 | + <View style={{margin: 8}}> |
90 | 90 | <BouncyCheckbox |
91 | 91 | isChecked |
92 | 92 | text="Do a load of laundry" |
93 | | - textStyle={{ fontFamily: "JosefinSans-Regular" }} |
| 93 | + textStyle={{fontFamily: 'JosefinSans-Regular'}} |
94 | 94 | onPress={(isChecked: boolean) => {}} |
95 | 95 | /> |
96 | 96 | </View> |
97 | 97 | </View> |
98 | 98 | <View |
99 | 99 | style={{ |
100 | 100 | marginTop: 16, |
101 | | - }} |
102 | | - > |
| 101 | + }}> |
103 | 102 | <Text |
104 | 103 | style={{ |
105 | 104 | marginLeft: 24, |
106 | 105 | fontSize: 24, |
107 | | - fontWeight: "700", |
108 | | - fontFamily: "JosefinSans-Regular", |
109 | | - }} |
110 | | - > |
| 106 | + fontWeight: '700', |
| 107 | + fontFamily: 'JosefinSans-Regular', |
| 108 | + }}> |
111 | 109 | Checkbox Only |
112 | 110 | </Text> |
113 | 111 | <View |
114 | 112 | style={{ |
115 | 113 | marginTop: 16, |
116 | | - width: "100%", |
117 | | - flexDirection: "row", |
118 | | - justifyContent: "space-evenly", |
119 | | - }} |
120 | | - > |
| 114 | + width: '100%', |
| 115 | + flexDirection: 'row', |
| 116 | + justifyContent: 'space-evenly', |
| 117 | + }}> |
121 | 118 | <BouncyCheckbox |
122 | 119 | size={50} |
123 | 120 | isChecked |
124 | | - iconImageStyle={{ width: 18, height: 18 }} |
| 121 | + iconImageStyle={{width: 18, height: 18}} |
125 | 122 | disableText |
126 | 123 | onPress={() => {}} |
127 | 124 | /> |
128 | 125 | <BouncyCheckbox |
129 | 126 | disableText |
130 | 127 | fillColor="#f54b42" |
131 | 128 | size={50} |
132 | | - iconImageStyle={{ width: 18, height: 18 }} |
133 | | - iconStyle={{ borderColor: "#f54b42" }} |
| 129 | + iconImageStyle={{width: 18, height: 18}} |
| 130 | + iconStyle={{borderColor: '#f54b42'}} |
134 | 131 | onPress={() => {}} |
135 | 132 | /> |
136 | 133 | <BouncyCheckbox |
137 | 134 | isChecked |
138 | 135 | disableText |
139 | 136 | fillColor="#4287f5" |
140 | 137 | size={50} |
141 | | - iconImageStyle={{ width: 18, height: 18 }} |
142 | | - iconStyle={{ borderColor: "#4287f5" }} |
| 138 | + iconImageStyle={{width: 18, height: 18}} |
| 139 | + iconStyle={{borderColor: '#4287f5'}} |
143 | 140 | onPress={() => {}} |
144 | 141 | /> |
145 | 142 | <BouncyCheckbox |
146 | | - ref={(touchable) => (this.touchable = touchable)} |
| 143 | + ref={touchable => (this.touchable = touchable)} |
147 | 144 | disableText |
148 | 145 | fillColor="#9342f5" |
149 | 146 | size={50} |
150 | | - iconImageStyle={{ width: 18, height: 18 }} |
151 | | - iconStyle={{ borderColor: "#9342f5" }} |
| 147 | + iconImageStyle={{width: 18, height: 18}} |
| 148 | + iconStyle={{borderColor: '#9342f5'}} |
152 | 149 | onPress={() => { |
153 | | - alert("hello"); |
| 150 | + alert('hello'); |
154 | 151 | }} |
155 | 152 | /> |
156 | 153 | <BouncyCheckbox |
157 | 154 | isChecked |
158 | 155 | disableText |
159 | 156 | fillColor="green" |
160 | 157 | size={50} |
161 | | - iconImageStyle={{ width: 18, height: 18 }} |
162 | | - iconStyle={{ borderColor: "green" }} |
| 158 | + iconImageStyle={{width: 18, height: 18}} |
| 159 | + iconStyle={{borderColor: 'green'}} |
163 | 160 | onPress={() => { |
164 | 161 | this.touchable?.props.onPress(); |
165 | 162 | }} |
|
0 commit comments