https://github.com/stackbuilders/react-native-with-typescript
Quito Lambda - React Native and TypeScript
https://github.com/stackbuilders/react-native-with-typescript
Last synced: 10 months ago
JSON representation
Quito Lambda - React Native and TypeScript
- Host: GitHub
- URL: https://github.com/stackbuilders/react-native-with-typescript
- Owner: stackbuilders
- Created: 2019-09-05T21:10:36.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T09:14:40.000Z (about 3 years ago)
- Last Synced: 2025-01-23T04:32:38.645Z (about 1 year ago)
- Language: Haskell
- Homepage:
- Size: 1.31 MB
- Stars: 2
- Watchers: 5
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Quito Lambda - React Native + Typescript
## Steps
- Install `react-native-cli`:
``` bash
npm install -g react-native-cli
```
- Create a new project with typescript template
```bash
react-native init [project name] --template typescript
```
- Create new environment variable `ANDROID_SDK_ROOT` with the path of your `~/Android/Sdk/.
- Create android and ios scripts on `package.json`
```json
"android": "react-native run-android"
"ios": "react-native run-ios"
```
- Execute `npm run android` or `yarn android` to see your initial application.
- Remove `.prettierrc.js`.
- Add a tslinter to the project.
```bash
npm install --save-dev tslint tslint-react tslint-config-prettier
yarn install --dev tslint tslint-react tslint-config-prettier
```
- Create `tslint.json` file.
```json
{
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"]
}
```
- Add rule `"resolveJsonModule": true` to `tsconfig` and change `index.js` to `index.tsx`.
```json
{
"resolveJsonModule": true
}
```
- Add type definitions for `User`.
``` typescript
export type UserType = "admin" | "normal";
export type Hobby = "soccer" | "basketball" | "baseball";
export interface IApiUser {
id: number;
name: string;
age: number;
hobbies: Hobby[];
type: UserType;
}
export interface INormalUser extends IApiUser {
type: "normal";
}
export interface IAdminUser extends IApiUser {
type: "admin";
}
export type Users = IApiUser[];
type Omit = Pick>;
export type PostUser = Omit;
export type UpdateUser = Omit;
```
- Create components for normal and admin user.
``` javascript
interface INormalProps {
user: INormalUser;
}
export const Normal: React.FC = ({ user: { name, hobbies } }) => (
{name}
Hobbies
{hobbies.map((hobby, index) => (
{hobby}
))}
);
interface IAdminProps {
user: IAdminUser;
}
export const Admin: React.FC = ({ user: { name, age } }) => (
Welcome {name}
You can do anything with {age} years!
);
```
- Add a component to display a list of users
``` javascript
interface IUserListProps {
users: Users;
}
export const List: React.FC = ({ users }) => {
const renderUser: ListRenderItem = ({ item, index }) => {
if (item.type === "admin") {
return ;
}
return ;
};
const keyExtractor = (item: User, index: number) => `${item.type}-${index}`;
return (
);
};
```
- Create screen to load user data from API
``` javascript
interface IUserScreenState {
loading: boolean;
users: Users;
error: string | null;
}
export const User: React.FC = () => {
const [{ error, loading, users }, setState] = useState({
error: null,
loading: true,
users: []
});
useEffect(() => {
fetch("http://fbd5c453.ngrok.io/users", {
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
method: "GET"
})
.then(response => {
if (response.ok) {
response
.json()
.then(us => setState({ loading: false, users: us, error: null }));
} else {
setState({
error: `Server responded with error ${response.status}.`,
loading: false,
users: []
});
}
})
.catch(err => {
setState({
error: err,
loading: false,
users: []
});
});
});
if (loading) {
return (
);
}
if (error) {
return (
{error}
);
}
return (
);
};
```
- Add navigation libraries
``` bash
yarn add react-native-gesture-handler react-native-reanimated react-navigation
npm install react-native-gesture-handler react-native-reanimated react-navigation
```
- Create navigation for the application
``` javascript
export const AppNavigator = createAppContainer(
createStackNavigator(
{
Users: {
navigationOptions: {
title: "Quito Lambda - Users"
},
screen: User
}
},
{ initialRouteName: "Users" }
)
);
```
- Add navigation into entry point of the application
``` javascript
const App: React.FC = () => (
);
```