Nativebase: Font Render Using Async (update documentation) && Keyboard Avoiding View does not work on input

[SacredWizard]

Two Issues

1. If a React native App is created with create react native App and using the async function given in the documentation without setting a state when using the below function it produces the following error

   ```async componentWillMount() {
   await Expo.Font.loadAsync({
   'Roboto': require('native-base/Fonts/Roboto.ttf'),
   'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
   });}

   ``` 10:50:47 PM: You started loading 'Roboto_medium', but used it before it finished loading
   You need to wait for Expo.Font.loadAsync to complete before using the font.
   We recommend loading all fonts before rendering the app, and rendering only Expo.AppLoading 
   while waiting for loading to complete.
   

   If the state is set this.setState({isReady:true}) (basically to flag that its loaded) then It does not produce any error, the Getting started documentation needs to be updated

2. The Keyboard does not push the input content up if the input box is at the bottom. The files are given below, input text fields are placed at the bottom of the screen, so the text fields are not seen when the input section is tapped. App.js has a list of some dummy items and then a small form, I think this is only for android since it works fine for iOS

Steps to reproduce these

• Create an app with create-react-native-app
• Add the dependencies for native base and @expo/vector-icons
• This is tested using the Expo App on One Plus 3T

Here's the App.js File

import React from 'react';
import {Text} from 'react-native';
import { Container, Header, Content, Form, Item, Input, List, ListItem } from 'native-base';
import Expo from 'expo';

export default class App extends React.Component {

  state={
    isReady: false
  }

  async componentWillMount() {
  await Expo.Font.loadAsync({
    'Roboto': require('native-base/Fonts/Roboto.ttf'),
    'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
  });
  this.setState({isReady:true})
}

  render() {
    if (!this.state.isReady) {
      return <Expo.AppLoading />;
    }
    return (
      <Container>
        <Header />
        <Content>
        <List>
            <ListItem>
              <Text>Simon Mignolet</Text>
            </ListItem>
            <ListItem>
              <Text>Simon Mignolet</Text>
            </ListItem>
            <ListItem>
              <Text>Simon Mignolet</Text>
            </ListItem>
            <ListItem>
              <Text>Simon Mignolet</Text>
            </ListItem>
            <ListItem>
              <Text>Simon Mignolet</Text>
            </ListItem>
            <ListItem>
              <Text>Simon Mignolet</Text>
            </ListItem>
            <ListItem>
              <Text>Simon Mignolet</Text>
            </ListItem>
            <ListItem>
              <Text>Simon Mignolet</Text>
            </ListItem>
            <ListItem>
              <Text>Simon Mignolet</Text>
            </ListItem>
            <ListItem>
              <Text>Nathaniel Clyne</Text>
            </ListItem>
            <ListItem>
              <Text>Dejan Lovren</Text>
            </ListItem>
          </List>
          <Form>
            <Item>
              <Input placeholder="Username" />
            </Item>
            <Item last>
              <Input placeholder="Password" />
            </Item>
          </Form>
        </Content>
      </Container>
    );
  }
}

Here's the package.json file

{
  "name": "native-base-test-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "jest-expo": "~20.0.0",
    "react-native-scripts": "1.3.1",
    "react-test-renderer": "16.0.0-alpha.12"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^5.2.0",
    "expo": "^20.0.0",
    "native-base": "^2.3.2",
    "react": "16.0.0-alpha.12",
    "react-native": "^0.47.0"
  }
}

[paulhanna1933]

Thank you so much for providing this solution! It worked out for me!

[paulhanna1933]

You guys should really update the get started instructions for crna

[SupriyaKalghatgi]

@SacredWizard Regarding the 2nd issue, it has been fixed

[SupriyaKalghatgi]

@paulhanna1933 We are not the ones for https://github.com/react-community/create-react-native-app, so you can raise issue on their git

[SupriyaKalghatgi]

@SacredWizard Regarding 1st issue of yours, NativeBase docs has provided relevant details with respect to usage of NativeBase with CRNA. Hence we cannot take your request of updating docs on this part

[SacredWizard]

👍🏻

[TeraouiAhmed]

Thank you so much

[hanspoo]

Agree with paul: You guys should really update the get started instructions for crna