Skip to content

Commit bf86b28

Browse files
authored
Update README.md
1 parent c3fc7e8 commit bf86b28

File tree

1 file changed

+80
-0
lines changed

1 file changed

+80
-0
lines changed

README.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,10 +189,90 @@ export default class PizzaTranslator extends Component<{}, { text: string }> {
189189
}
190190
```
191191

192+
---
193+
192194
### Handling Touches
193195

194196
https://facebook.github.io/react-native/docs/handling-touches
195197

198+
---
199+
200+
### Using a ScrollView
201+
202+
https://facebook.github.io/react-native/docs/using-a-scrollview
203+
204+
---
205+
206+
### Using List views
207+
208+
https://facebook.github.io/react-native/docs/using-a-listview
209+
210+
---
211+
212+
### Networking
213+
214+
https://facebook.github.io/react-native/docs/network
215+
216+
```ts
217+
import React from 'react';
218+
import { FlatList, ActivityIndicator, Text, View } from 'react-native';
219+
220+
221+
type DataItem = { title: string, releaseYear: string, id: string }
222+
type State = {
223+
isLoading: boolean,
224+
dataSource?: DataItem[]
225+
}
226+
export default class FetchExample extends React.Component<{}, State> {
227+
228+
constructor(props) {
229+
super(props);
230+
this.state = { isLoading: true }
231+
}
232+
233+
componentDidMount() {
234+
return fetch('https://facebook.github.io/react-native/movies.json')
235+
.then((response) => response.json())
236+
.then((responseJson: {movies: any}) => {
237+
238+
this.setState({
239+
isLoading: false,
240+
dataSource: responseJson.movies,
241+
}, function () {
242+
243+
});
244+
245+
})
246+
.catch((error) => {
247+
console.error(error);
248+
});
249+
}
250+
251+
252+
253+
render() {
254+
255+
if (this.state.isLoading) {
256+
return (
257+
<View style={{ flex: 1, padding: 20 }}>
258+
<ActivityIndicator />
259+
</View>
260+
)
261+
}
262+
263+
return (
264+
<View style={{ flex: 1, paddingTop: 20 }}>
265+
<FlatList
266+
data={this.state.dataSource}
267+
renderItem={({ item }) => <Text>{item.title}, {item.releaseYear}</Text>}
268+
keyExtractor={({ id }, index) => id}
269+
/>
270+
</View>
271+
);
272+
}
273+
}
274+
```
275+
196276
## Contributing
197277

198278
This project aims to accumulate TypeScript advice for React Native users, in the same nature as https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/. This is a new project and [**we are actively seeking maintainers**](https://github.com/typescript-cheatsheets/react-native-typescript-cheatsheet/issues/1).

0 commit comments

Comments
 (0)