Skip to content

Commit ba6bcd7

Browse files
Himanshu SatijaHimanshu Satija
Himanshu Satija
authored and
Himanshu Satija
committed
remove key and shadow warnings
1 parent 26801ef commit ba6bcd7

File tree

6 files changed

+101
-56
lines changed

6 files changed

+101
-56
lines changed

‎Components/Widgets/Button.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ export default class Button extends NativeBaseComponent {
101101
this.getTheme().inverseTextColor,
102102

103103
fontSize: (this.props.large) ? this.getTheme().iconSizeLarge : (this.props.small) ? this.getTheme().iconSizeSmall : this.getTheme().iconFontSize,
104-
lineHeight: (this.props.large) ? 52: (this.props.small) ? 22 : 39
104+
lineHeight: (this.props.large) ? 48: (this.props.small) ? 22 : 32
105105
}
106106

107107
var defaultProps = {
@@ -129,13 +129,13 @@ export default class Button extends NativeBaseComponent {
129129
}
130130
});
131131
if(this.props.iconRight) {
132-
newChildren.push(<Text style={this.getTextStyle()}>{childrenArray[0]}</Text>);
133-
newChildren.push(<Text>{React.cloneElement(iconElement[0], this.getIconProps(iconElement[0]))}</Text>);
132+
newChildren.push(<Text key='label' style={this.getTextStyle()}>{childrenArray[0]}</Text>);
133+
newChildren.push(<Text key='icon'>{React.cloneElement(iconElement[0], this.getIconProps(iconElement[0]))}</Text>);
134134
}
135135

136136
else if(this.props.iconLeft || iconElement) {
137-
newChildren.push(<Text>{React.cloneElement(iconElement[0], this.getIconProps(iconElement[0]))}</Text>);
138-
newChildren.push(<Text style={this.getTextStyle()}>{childrenArray[0]}</Text>);
137+
newChildren.push(<Text key='icon'>{React.cloneElement(iconElement[0], this.getIconProps(iconElement[0]))}</Text>);
138+
newChildren.push(<Text key='label' style={this.getTextStyle()}>{childrenArray[0]}</Text>);
139139
}
140140

141141
return newChildren;

‎Components/Widgets/Card.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,26 @@ export default class CardNB extends NativeBaseComponent {
3333
style: this.getInitialStyle().card
3434
};
3535
// console.log("final style object", computeProps(this.props, defaultProps));
36-
var computedStyle = computeProps(this.props, defaultProps).style.backgroundColor;
37-
console.log("computedStyle", computedStyle);
36+
// var computedStyle = computeProps(this.props, defaultProps).style.backgroundColor;
37+
// console.log("computedStyle", computedStyle);
3838
return computeProps(this.props, defaultProps);
3939

4040
}
4141

42+
renderChildren() {
43+
var childrenArray = React.Children.map(this.props.children, (child) => {
44+
return child;
45+
});
46+
47+
console.log(childrenArray, "children card");
48+
49+
return childrenArray;
50+
}
51+
4252
render() {
4353
return(
4454
<View {...this.prepareRootProps()} >
45-
{this.props.children}
55+
{this.renderChildren()}
4656
</View>
4757
);
4858
}

‎Components/Widgets/CardItem.js‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,15 @@ import View from './View';
1111
import Button from './Button';
1212
import Thumbnail from './Thumbnail';
1313

14-
export default class ListItemNB extends NativeBaseComponent {
14+
var keyIndex = 0;
15+
16+
export default class CardItemNB extends NativeBaseComponent {
1517

1618
getInitialStyle() {
1719
return {
1820
listItem: {
1921
borderBottomWidth: this.getTheme().borderWidth,
2022
padding: (this.imagePresent() && !this.ifShowCase()) ? 0 : this.getTheme().listItemPadding,
21-
borderRadius: 1,
2223
flex: 1,
2324
backgroundColor: this.getTheme().listBg,
2425
justifyContent: (this.buttonPresent()) ? 'space-between' : 'flex-start',
@@ -171,57 +172,67 @@ export default class ListItemNB extends NativeBaseComponent {
171172
if(child.type == Image && !Array.isArray(this.props.children)) {
172173
defaultProps = {
173174
resizeMode: 'stretch',
174-
style: this.getInitialStyle().fullImage
175+
style: this.getInitialStyle().fullImage,
176+
key: keyIndex++
175177
}
176178
}
177179
else if(child.type == Button) {
178180
defaultProps = {
179181
small: true,
180-
style: this.getInitialStyle().itemButton
182+
style: this.getInitialStyle().itemButton,
183+
key: keyIndex++
181184
}
182185
}
183186
else if(child.type == Text) {
184187
if ((this.props.header) || (this.props.footer)) {
185188
defaultProps = {
186-
style: this.getInitialStyle().dividerItemText
189+
style: this.getInitialStyle().dividerItemText,
190+
key: keyIndex++
187191
}
188192
}
189193
else {
190194
if(child.props.note && this.thumbnailPresent()) {
191195
defaultProps = {
192-
style: this.getInitialStyle().itemSubNote
196+
style: this.getInitialStyle().itemSubNote,
197+
key: keyIndex++
193198
}
194199
}
195200
else if(child.props.note) {
196201
defaultProps = {
197-
style: this.getInitialStyle().itemNote
202+
style: this.getInitialStyle().itemNote,
203+
key: keyIndex++
198204
}
199205
}
200206
else {
201207
defaultProps = {
202-
style: this.getInitialStyle().itemText
208+
style: this.getInitialStyle().itemText,
209+
key: keyIndex++
203210
}
204211
}
205212
}
206213
}
207214
else if(child.type == Icon) {
208215
defaultProps = {
209-
style: this.getInitialStyle().itemIcon
216+
style: this.getInitialStyle().itemIcon,
217+
key: keyIndex++
210218
}
211219
}
212220
else if(child.type == Thumbnail) {
213221
defaultProps = {
214-
style: this.getInitialStyle().thumbnail
222+
style: this.getInitialStyle().thumbnail,
223+
key: keyIndex++
215224
}
216225
}
217226
else if(child.type == Image ) {
218227
defaultProps = {
219-
style: this.getInitialStyle().fullImage
228+
style: this.getInitialStyle().fullImage,
229+
key: keyIndex++
220230
}
221231
}
222232
else {
223233
defaultProps = {
224-
foregroundColor: this.getContextForegroundColor()
234+
foregroundColor: this.getContextForegroundColor(),
235+
key: keyIndex++
225236
}
226237
}
227238

@@ -234,13 +245,15 @@ export default class ListItemNB extends NativeBaseComponent {
234245
if((this.props.header) || (this.props.footer)) {
235246

236247
defaultProps = {
237-
style: this.getInitialStyle().listItemDivider
248+
style: this.getInitialStyle().listItemDivider,
249+
key: keyIndex++
238250
};
239251
}
240252

241253
else {
242254
defaultProps = {
243-
style: this.getInitialStyle().listItem
255+
style: this.getInitialStyle().listItem,
256+
key: keyIndex++
244257
};
245258
}
246259

@@ -263,7 +276,7 @@ export default class ListItemNB extends NativeBaseComponent {
263276
newChildren = [];
264277
if(!Array.isArray(this.props.children)) {
265278
newChildren.push(
266-
<View style={{justifyContent: 'flex-start'}}>
279+
<View key={keyIndex++} style={{justifyContent: 'flex-start'}}>
267280
{React.cloneElement(this.props.children, this.getChildProps(this.props.children))}
268281
</View>
269282
);
@@ -273,7 +286,7 @@ export default class ListItemNB extends NativeBaseComponent {
273286
var childrenArray = React.Children.toArray(this.props.children);
274287
newChildren.push(React.cloneElement(childrenArray[0], this.getChildProps(childrenArray[0])));
275288
newChildren.push(
276-
<View style={ this.notePresent() ? this.getRightStyle().right : this.squareThumbs() ? this.getRightStyle().right3 : this.getRightStyle().right2 }>
289+
<View key={keyIndex++} style={ this.notePresent() ? this.getRightStyle().right : this.squareThumbs() ? this.getRightStyle().right3 : this.getRightStyle().right2 }>
277290
{childrenArray.slice(1).map((child) => {
278291
return React.cloneElement(child, this.getChildProps(child));
279292
})}

‎Components/Widgets/InputGroup.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -140,18 +140,18 @@ export default class InputGroup extends NativeBaseComponent {
140140
if(Array.isArray(this.props.children)) {
141141

142142
if(this.props.iconRight) {
143-
newChildren.push(<Input {...inputProps}/>);
144-
newChildren.push(<Text style={{marginTop: 5, paddingRight: 7}}>{React.cloneElement(iconElement[0], this.getIconProps(iconElement[0]))}</Text>);
143+
newChildren.push(<Input key='inp' {...inputProps}/>);
144+
newChildren.push(<Text key='icon' style={{marginTop: 5, paddingRight: 7}}>{React.cloneElement(iconElement[0], this.getIconProps(iconElement[0]))}</Text>);
145145
}
146146
else {
147147

148-
newChildren.push(<Text style={{marginTop: 5, paddingRight: 7}}>{React.cloneElement(iconElement[0], this.getIconProps(iconElement[0]))}</Text>);
149-
newChildren.push(<Input {...inputProps}/>);
148+
newChildren.push(<Text key='inp' style={{marginTop: 5, paddingRight: 7}}>{React.cloneElement(iconElement[0], this.getIconProps(iconElement[0]))}</Text>);
149+
newChildren.push(<Input key='icon' {...inputProps}/>);
150150
}
151151
}
152152

153153
else {
154-
newChildren.push(<Input {...inputProps}/>);
154+
newChildren.push(<Input key='inp' {...inputProps}/>);
155155
}
156156

157157

‎Components/Widgets/List.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,13 @@ export default class ListNB extends NativeBaseComponent {
3737

3838
var childrenArray = React.Children.toArray(this.props.children);
3939

40+
var keyIndex = 0;
41+
42+
childrenArray = childrenArray.map((child) => {
43+
keyIndex++;
44+
return React.cloneElement(child, {...child.props, key: keyIndex});
45+
});
46+
4047
var lastElement = _.last(childrenArray);
4148

4249
var modLastElement = React.cloneElement(lastElement, computeProps(lastElement.props, {last: true}));

0 commit comments

Comments
 (0)