Todo list implementation #1
Conversation
| @@ -0,0 +1 @@ | |||
| A react native application with todo implementation. | |||
There was a problem hiding this comment.
We generally add TODO now you have implemented. 😅
tsconfig.json
Outdated
| // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ | ||
| // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ | ||
| } | ||
| } No newline at end of file |
ankit-agrawal11
changed the title
src/App.tsx
Outdated
| marginTop: 5, | ||
| marginBottom: 5 | ||
| }, | ||
| listItemCont: { |
There was a problem hiding this comment.
Yes. spell-check didn't show an error for this. 😅
Fixed.
src/App.tsx
Outdated
|
|
||
| Keyboard.addListener( | ||
| isAndroid ? "keyboardDidHide" : "keyboardWillHide", | ||
| () => this.setState({ viewPadding: viewPadding }) |
| ); | ||
|
|
||
| const tasks = await this.getTasksFromStorage() | ||
| this.setState({tasks}); |
There was a problem hiding this comment.
setState only once, line 36,41 and 45 can be combined as
this.setState({ viewPadding: someVarHoldingTheValue, tasks })
There was a problem hiding this comment.
Setting different padding when the keyboard is visible and when it's hidden. So, this can not be combined.
| render(): JSX.Element { | ||
| return ( | ||
| <View style={[styles.container, { paddingBottom: this.state.viewPadding }]}> | ||
| <FlatList |
There was a problem hiding this comment.
list and text inputs can be broken down into shorter renders.
There was a problem hiding this comment.
That would look weird. Since this view only renders FlatList and TextInput and there is no logic. I am just passing the props.
renderItem prop's implementation has been moved to a separate function. That should make it readable now.
| testID='flat-list' | ||
| style={styles.list} | ||
| data={this.state.tasks} | ||
| renderItem={(task: { index: number, item: { text: string, key: string, isCompleted: boolean } }) => |
There was a problem hiding this comment.
renderItem can move out as a separate function, it's for the ease of debugging
Title
Todo list implementation
Problem
Ramping up react native.
Solution / Approach
Creating a react native app to learn the basics.
Dependencies?
None
Test Procedures
Clone the repo and then run:
npm i
exp start (You may need to install expo)
Download expo app from play store and scan the QR code.
Test the basic Todo implementation
Additional comments / concerns
None