@hitesh0009/react-native-basic-form 1.1.6 → 1.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/Form.js +35 -14
  2. package/dist/types.d.ts +10 -1
  3. package/package.json +1 -1
  4. package/src/Form.tsx +86 -31
  5. package/src/types.ts +12 -1
package/dist/Form.js CHANGED
@@ -1,24 +1,45 @@
1
1
  import { FlatList, Image, StyleSheet, Text, TextInput, TouchableOpacity, View, } from "react-native";
2
- export const Form = ({ data, gap_bwt_keyValue = 10, gap_bwt_keys = 12, lableStyle, inputTextStyle, buttonContainerStyle, buttonTextStyle, headerIcon, headerIconStyle, headerTextStyle, imageProps, flatlistProps, textInputProps, textProp, headerText, headerContainerStyle, containerStyle, }) => {
2
+ export const Form = ({ data, gap_bwt_keyValue = 10, gap_bwt_keys = 12, lableStyle, inputTextStyle, buttonContainerStyle, buttonTextStyle, headerIcon, headerIconStyle, headerTextStyle, imageProps, flatlistProps, textInputProps, textProp, headerText, headerContainerStyle, containerStyle, imageContainerStyle, touchableOpacityProp, inputTextContainerStyle, inputTextGroupContainerStyle, ButtonContainerStyle, buttonGroupContainerStyle, buttonGroupStyle, }) => {
3
3
  return (<View style={[{ gap: 20 }, containerStyle]}>
4
- {(headerIcon || headerText) && <View style={[{ flexDirection: "row", gap: 10 }, headerContainerStyle]}>
5
- {headerIcon && (<Image source={headerIcon} style={[styles.headericon, headerIconStyle]} {...imageProps}/>)}
6
- {headerText && (<Text style={[styles.headertext, headerTextStyle]} {...textProp}>
7
- {headerText}
8
- </Text>)}
9
- </View>}
10
-
4
+ {(headerIcon || headerText) && (<View style={[{ flexDirection: "row", gap: 10 }, headerContainerStyle]}>
5
+ {headerIcon && (<View style={imageContainerStyle}>
6
+ <Image source={headerIcon} style={[styles.headericon, headerIconStyle]} {...imageProps}/>
7
+ </View>)}
8
+ {headerText && (<Text style={[styles.headertext, headerTextStyle]} {...textProp}>
9
+ {headerText}
10
+ </Text>)}
11
+ </View>)}
11
12
 
12
13
  <FlatList {...flatlistProps} data={data} keyExtractor={(item) => item.id} ItemSeparatorComponent={() => <View style={{ height: gap_bwt_keys }}/>} renderItem={({ item }) => (<View style={{ gap: gap_bwt_keyValue }}>
13
14
  {item.label && (<Text style={[styles.lable, lableStyle]}>{item.label}</Text>)}
14
15
 
15
- {item.input && (<TextInput {...textInputProps} style={[styles.inputtext, inputTextStyle]} placeholder={item.input.placeholder} value={item.input.value} onChangeText={item.input.onChangeText} keyboardType={item.input.keyboardType}/>)}
16
+ {item.input && (<View style={inputTextContainerStyle}>
17
+ <TextInput {...textInputProps} style={[styles.inputtext, inputTextStyle]} placeholder={item.input.placeholder} value={item.input.value} onChangeText={item.input.onChangeText} keyboardType={item.input.keyboardType}/>
18
+ </View>)}
16
19
 
17
- {item.button && (<TouchableOpacity onPress={item.button.onPress} style={[styles.button_container, buttonContainerStyle]}>
18
- <Text style={[styles.button_text, buttonTextStyle]}>
19
- {item.button.label}
20
- </Text>
21
- </TouchableOpacity>)}
20
+ {item.inputTextGroup &&
21
+ item.inputTextGroup.map((inp, index) => (<View key={index} style={inputTextGroupContainerStyle}>
22
+ <TextInput {...textInputProps} style={[styles.inputtext, inputTextStyle]} placeholder={inp.placeholder} value={inp.value} onChangeText={inp.onChangeText} keyboardType={inp.keyboardType}/>
23
+ </View>))}
24
+
25
+ {item.button && (<View style={ButtonContainerStyle}>
26
+ <TouchableOpacity {...touchableOpacityProp} onPress={item.button.onPress} style={[styles.button_container, buttonContainerStyle]}>
27
+ <Text style={[styles.button_text, buttonTextStyle]}>
28
+ {item.button.label}
29
+ </Text>
30
+ </TouchableOpacity>
31
+ </View>)}
32
+
33
+ {item.buttonGroup && (<View style={[
34
+ { flexDirection: "row", gap: 10 },
35
+ buttonGroupContainerStyle,
36
+ ]}>
37
+ {item.buttonGroup.map((btn, index) => (<TouchableOpacity key={index} onPress={btn.onPress} style={[styles.button_container, buttonGroupStyle]}>
38
+ <Text style={[styles.button_text, buttonTextStyle]}>
39
+ {btn.label}
40
+ </Text>
41
+ </TouchableOpacity>))}
42
+ </View>)}
22
43
  </View>)}/>
23
44
  </View>);
24
45
  };
package/dist/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { FlatListProps, ImageProps, ImageSourcePropType, ImageStyle, TextInputProps, TextProps, TextStyle, ViewStyle } from "react-native";
1
+ import type { FlatListProps, ImageProps, ImageSourcePropType, ImageStyle, TextInputProps, TextProps, TextStyle, TouchableOpacityProps, ViewStyle } from "react-native";
2
2
  export type FormInput = {
3
3
  placeholder?: string;
4
4
  value: string;
@@ -16,6 +16,8 @@ export type FormItem = {
16
16
  label?: string;
17
17
  input?: FormInput;
18
18
  button?: FormButton;
19
+ buttonGroup?: FormButton[];
20
+ inputTextGroup?: FormInput[];
19
21
  };
20
22
  export type FormProps = {
21
23
  data: FormItem[];
@@ -36,4 +38,11 @@ export type FormProps = {
36
38
  headerContainerStyle?: ViewStyle;
37
39
  containerStyle?: ViewStyle;
38
40
  textInputProps?: TextInputProps;
41
+ imageContainerStyle?: ViewStyle;
42
+ touchableOpacityProp?: TouchableOpacityProps;
43
+ inputTextContainerStyle?: ViewStyle;
44
+ ButtonContainerStyle?: ViewStyle;
45
+ buttonGroupContainerStyle?: ViewStyle;
46
+ buttonGroupStyle?: ViewStyle;
47
+ inputTextGroupContainerStyle?: ViewStyle;
39
48
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hitesh0009/react-native-basic-form",
3
- "version": "1.1.6",
3
+ "version": "1.1.8",
4
4
  "description": "A lightweight, data-driven form renderer for React Native with fully controlled inputs and flexible styling.",
5
5
  "keywords": [
6
6
  "react-native",
package/src/Form.tsx CHANGED
@@ -18,8 +18,10 @@ export const Form: React.FC<FormProps> = ({
18
18
  buttonContainerStyle,
19
19
  buttonTextStyle,
20
20
  headerIcon,
21
+
21
22
  headerIconStyle,
22
23
  headerTextStyle,
24
+
23
25
  imageProps,
24
26
  flatlistProps,
25
27
  textInputProps,
@@ -27,24 +29,37 @@ export const Form: React.FC<FormProps> = ({
27
29
  headerText,
28
30
  headerContainerStyle,
29
31
  containerStyle,
32
+ imageContainerStyle,
33
+ touchableOpacityProp,
34
+
35
+ inputTextContainerStyle,
36
+ inputTextGroupContainerStyle,
37
+
38
+ ButtonContainerStyle,
39
+
40
+ buttonGroupContainerStyle,
41
+ buttonGroupStyle,
30
42
  }) => {
31
43
  return (
32
- <View style={[{gap:20},containerStyle]}>
33
- {(headerIcon || headerText) && <View style={[{ flexDirection: "row",gap:10 }, headerContainerStyle]}>
34
- {headerIcon && (
35
- <Image
36
- source={headerIcon}
37
- style={[styles.headericon, headerIconStyle]}
38
- {...imageProps}
39
- />
40
- )}
41
- {headerText && (
42
- <Text style={[styles.headertext, headerTextStyle]} {...textProp}>
43
- {headerText}
44
- </Text>
45
- )}
46
- </View>}
47
-
44
+ <View style={[{ gap: 20 }, containerStyle]}>
45
+ {(headerIcon || headerText) && (
46
+ <View style={[{ flexDirection: "row", gap: 10 }, headerContainerStyle]}>
47
+ {headerIcon && (
48
+ <View style={imageContainerStyle}>
49
+ <Image
50
+ source={headerIcon}
51
+ style={[styles.headericon, headerIconStyle]}
52
+ {...imageProps}
53
+ />
54
+ </View>
55
+ )}
56
+ {headerText && (
57
+ <Text style={[styles.headertext, headerTextStyle]} {...textProp}>
58
+ {headerText}
59
+ </Text>
60
+ )}
61
+ </View>
62
+ )}
48
63
 
49
64
  <FlatList<FormItem>
50
65
  {...flatlistProps}
@@ -58,25 +73,65 @@ export const Form: React.FC<FormProps> = ({
58
73
  )}
59
74
 
60
75
  {item.input && (
61
- <TextInput
62
- {...textInputProps}
63
- style={[styles.inputtext, inputTextStyle]}
64
- placeholder={item.input.placeholder}
65
- value={item.input.value}
66
- onChangeText={item.input.onChangeText}
67
- keyboardType={item.input.keyboardType}
68
- />
76
+ <View style={inputTextContainerStyle}>
77
+ <TextInput
78
+ {...textInputProps}
79
+ style={[styles.inputtext, inputTextStyle]}
80
+ placeholder={item.input.placeholder}
81
+ value={item.input.value}
82
+ onChangeText={item.input.onChangeText}
83
+ keyboardType={item.input.keyboardType}
84
+ />
85
+ </View>
69
86
  )}
70
87
 
88
+ {item.inputTextGroup &&
89
+ item.inputTextGroup.map((inp, index) => (
90
+ <View key={index} style={inputTextGroupContainerStyle}>
91
+ <TextInput
92
+ {...textInputProps}
93
+ style={[styles.inputtext, inputTextStyle]}
94
+ placeholder={inp.placeholder}
95
+ value={inp.value}
96
+ onChangeText={inp.onChangeText}
97
+ keyboardType={inp.keyboardType}
98
+ />
99
+ </View>
100
+ ))}
101
+
71
102
  {item.button && (
72
- <TouchableOpacity
73
- onPress={item.button.onPress}
74
- style={[styles.button_container, buttonContainerStyle]}
103
+ <View style={ButtonContainerStyle}>
104
+ <TouchableOpacity
105
+ {...touchableOpacityProp}
106
+ onPress={item.button.onPress}
107
+ style={[styles.button_container, buttonContainerStyle]}
108
+ >
109
+ <Text style={[styles.button_text, buttonTextStyle]}>
110
+ {item.button.label}
111
+ </Text>
112
+ </TouchableOpacity>
113
+ </View>
114
+ )}
115
+
116
+ {item.buttonGroup && (
117
+ <View
118
+ style={[
119
+ { flexDirection: "row", gap: 10 },
120
+ buttonGroupContainerStyle,
121
+ ]}
75
122
  >
76
- <Text style={[styles.button_text, buttonTextStyle]}>
77
- {item.button.label}
78
- </Text>
79
- </TouchableOpacity>
123
+ {item.buttonGroup.map((btn, index) => (
124
+ <TouchableOpacity
125
+ key={index}
126
+ onPress={btn.onPress}
127
+ style={[styles.button_container, buttonGroupStyle]}
128
+ >
129
+ <Text style={[styles.button_text, buttonTextStyle]}>
130
+ {btn.label}
131
+ </Text>
132
+ </TouchableOpacity>
133
+ ))}
134
+ </View>
80
135
  )}
81
136
  </View>
82
137
  )}
package/src/types.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { TouchableOpacity } from "./../node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.d";
1
2
  import type {
2
3
  FlatListProps,
3
4
  ImageProps,
@@ -6,6 +7,7 @@ import type {
6
7
  TextInputProps,
7
8
  TextProps,
8
9
  TextStyle,
10
+ TouchableOpacityProps,
9
11
  ViewStyle,
10
12
  } from "react-native";
11
13
 
@@ -28,6 +30,8 @@ export type FormItem = {
28
30
  label?: string;
29
31
  input?: FormInput;
30
32
  button?: FormButton;
33
+ buttonGroup?: FormButton[];
34
+ inputTextGroup?: FormInput[];
31
35
  };
32
36
 
33
37
  export type FormProps = {
@@ -53,5 +57,12 @@ export type FormProps = {
53
57
 
54
58
  headerContainerStyle?: ViewStyle;
55
59
  containerStyle?: ViewStyle;
56
- textInputProps?: TextInputProps
60
+ textInputProps?: TextInputProps;
61
+ imageContainerStyle?: ViewStyle;
62
+ touchableOpacityProp?: TouchableOpacityProps;
63
+ inputTextContainerStyle?: ViewStyle;
64
+ ButtonContainerStyle?: ViewStyle;
65
+ buttonGroupContainerStyle?: ViewStyle;
66
+ buttonGroupStyle?: ViewStyle;
67
+ inputTextGroupContainerStyle?:ViewStyle
57
68
  };