-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c985e7a
commit e3db433
Showing
273 changed files
with
7,573 additions
and
9,300 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import React from "react"; | ||
import App from "./js/App"; | ||
|
||
export default class App1 extends React.Component { | ||
constructor() { | ||
super(); | ||
this.state = { | ||
isReady: false | ||
}; | ||
} | ||
|
||
render() { | ||
return <App />; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import React from 'react'; | ||
import ReactNative from 'react-native'; | ||
import App from './App'; | ||
|
||
import renderer from 'react-test-renderer'; | ||
|
||
it('renders without crashing', () => { | ||
const rendered = renderer.create(<App />).toJSON(); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,74 +1,103 @@ | ||
# NativeBase KitchenSink v2.0 | ||
An example app with all the UI components of NativeBase | ||
This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app). | ||
|
||
## Demo | ||
Below you'll find information about performing common tasks. The most recent version of this guide is available [here](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md). | ||
|
||
iOS | Android | ||
:--:| :-----: | ||
![ios-demo](./screenshots/iOS.gif) | ![android-demo](./screenshots/Android.gif) | ||
## Table of Contents | ||
|
||
* [Updating to New Releases](#updating-to-new-releases) | ||
* [Available Scripts](#available-scripts) | ||
* [npm start](#npm-start) | ||
* [npm test](#npm-test) | ||
* [npm run ios](#npm-run-ios) | ||
* [npm run android](#npm-run-android) | ||
* [npm run eject](#npm-run-eject) | ||
* [Writing and Running Tests](#writing-and-running-tests) | ||
* [Customizing App Display Name and Icon](#customizing-app-display-name-and-icon) | ||
* [Sharing and Deployment](#sharing-and-deployment) | ||
* [Publishing to Expo's React Native Community](#publishing-to-expos-react-native-community) | ||
* [Building an Expo "standalone" app](#building-an-expo-standalone-app) | ||
* [Ejecting from Create React Native App](#ejecting-from-create-react-native-app) | ||
* [Build Dependencies (Xcode & Android Studio)](#build-dependencies-xcode-android-studio) | ||
* [Should I Use ExpoKit?](#should-i-use-expokit) | ||
* [Tips and Tricks](#tips-and-tricks) | ||
|
||
[NativeBase](http://nativebase.io/) is a free and open source framework that enables developers to build high-quality apps using [React Native](https://facebook.github.io/react-native/) for iOS and Android with a fusion of ES6. NativeBase builds a layer on top of React Native that provides you with basic set of components for mobile application development. This helps you to build world-class application experiences on native platforms. | ||
## Updating to New Releases | ||
|
||
NativeBase without a doubt fits in well with mobile applications which cut downs one huge part of your app - The Front end. | ||
The applications stack of components is built using native UI components, so there are no compromises with the user experience. | ||
You should only need to update the global installation of `create-react-native-app` very rarely, ideally never. | ||
|
||
Updating the `react-native-scripts` dependency of your app should be as simple as bumping the version number in `package.json` and reinstalling your project's dependencies. | ||
|
||
## Get Started | ||
Upgrading to a new version of React Native requires updating the `react-native`, `react`, and `expo` package versions, and setting the correct `sdkVersion` in `app.json`. See the [versioning guide](https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md) for up-to-date information about package version compatibility. | ||
|
||
## Available Scripts | ||
|
||
#### 1. Installation | ||
If yarn was installed when the project was initialized, then dependencies will have been installed via yarn, and you should probably use it to run these commands as well. Unlike dependency installation, command running syntax is identical for yarn and npm at the time of this writing. | ||
|
||
On the command prompt run the following commands | ||
### `npm start` | ||
|
||
```sh | ||
$ git clone [email protected]:GeekyAnts/NativeBase-KitchenSink.git | ||
Runs your app in development mode. | ||
|
||
$ cd NativeBase-KitchenSink/ | ||
Open it in the [Expo app](https://expo.io) on your phone to view it. It will reload if you save edits to your files, and you will see build errors and logs in the terminal. | ||
|
||
$ npm install | ||
#### `npm test` | ||
|
||
$ react-native link | ||
``` | ||
Runs the [jest](https://github.com/facebook/jest) test runner on your tests. | ||
|
||
#### 2. Simulate for iOS | ||
#### `npm run ios` | ||
|
||
**Method One** | ||
Like `npm start`, but also attempts to open your app in the iOS Simulator if you're on a Mac and have it installed. | ||
|
||
* Open the project in Xcode from **ios/NativebaseKitchenSink.xcodeproj**. | ||
#### `npm run android` | ||
|
||
* Hit the play button. | ||
Like `npm start`, but also attempts to open your app on a connected Android device or emulator. Requires an installation of Android build tools (see [React Native docs](https://facebook.github.io/react-native/docs/getting-started.html) for detailed setup). | ||
|
||
#### `npm run eject` | ||
|
||
**Method Two** | ||
This will start the process of "ejecting" from Create React Native App's build scripts. You'll be asked a couple of questions about how you'd like to build your project. | ||
|
||
* Run the following command in your terminal. | ||
**Warning:** Running eject is a permanent action (aside from whatever version control system you use). An ejected app will require you to have an [Xcode and/or Android Studio environment](https://facebook.github.io/react-native/docs/getting-started.html) set up. | ||
|
||
```sh | ||
$ react-native run-ios | ||
``` | ||
## Customizing App Display Name and Icon | ||
|
||
You can edit `app.json` to include [configuration keys](https://docs.expo.io/versions/latest/guides/configuration.html) under the `expo` key. | ||
|
||
To change your app's display name, set the `expo.name` key in `app.json` to an appropriate string. | ||
|
||
To set an app icon, set the `expo.icon` key in `app.json` to be either a local path or a URL. It's recommended that you use a 512x512 png file with transparency. | ||
|
||
## Writing and Running Tests | ||
|
||
This project is set up to use [jest](https://facebook.github.io/jest/) for tests. You can configure whatever testing strategy you like, but jest works out of the box. Create test files in directories called `__tests__` to have the files loaded by jest. See the [the template project](https://github.com/react-community/create-react-native-app/tree/master/react-native-scripts/template/__tests__) for an example test. The [jest documentation](https://facebook.github.io/jest/docs/getting-started.html) is also a wonderful resource, as is the [React Native testing tutorial](https://facebook.github.io/jest/docs/tutorial-react-native.html). | ||
|
||
#### 3. Simulate for Android | ||
## Sharing and Deployment | ||
|
||
* Make sure you have an **Android emulator** installed and running. | ||
Create React Native App does a lot of work to make app setup and development simple and straightforward, but it's very difficult to do the same for deploying to Apple's App Store or Google's Play Store without relying on a hosted service. | ||
|
||
* Run the following command in your terminal. | ||
### Publishing to Expo's React Native Community | ||
|
||
```sh | ||
$ react-native run-android | ||
Expo provides free hosting for the JS-only apps created by CRNA, allowing you to share your app through the Expo client app. This requires registration for an Expo account. | ||
|
||
Install the `exp` command-line tool, and run the publish command: | ||
|
||
``` | ||
$ npm i -g exp | ||
$ exp publish | ||
``` | ||
#### 4. Exponent | ||
|
||
* Get a quick look of the NativeBase components using <a href="https://getexponent.com/">Exponent</a> | ||
### Building an Expo "standalone" app | ||
|
||
You can also use a service like [Expo's standalone builds](https://docs.expo.io/versions/latest/guides/building-standalone-apps.html) if you want to get an IPA/APK for distribution without having to build the native code yourself. | ||
|
||
### Ejecting from Create React Native App | ||
|
||
If you want to build and deploy your app yourself, you'll need to eject from CRNA and use Xcode and Android Studio. | ||
|
||
* Link https://exp.host/@geekyants/nativebase-kitchenSink | ||
This is usually as simple as running `npm run eject` in your project, which will walk you through the process. Make sure to install `react-native-cli` and follow the [native code getting started guide for React Native](https://facebook.github.io/react-native/docs/getting-started.html). | ||
|
||
## Quick Links to NativeBase | ||
#### Should I Use ExpoKit? | ||
|
||
* [NativeBase Website](http://nativebase.io) | ||
* [NativeBase Documentation](http://nativebase.io/documentation) | ||
* [NativeBase on Twitter](https://twitter.com/NativeBaseIO) | ||
* [NativeBase Blog](https://medium.com/nativebase-io-blog) | ||
If you have made use of Expo APIs while working on your project, then those API calls will stop working if you eject to a regular React Native project. If you want to continue using those APIs, you can eject to "React Native + ExpoKit" which will still allow you to build your own native code and continue using the Expo APIs. See the [ejecting guide](https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md) for more details about this option. | ||
|
||
## Tips and Tricks | ||
|
||
For apps with more advanced designs using NativeBase, please visit **[StrapMobile](https://strapmobile.com/)**. | ||
* If you have a local network the prevents your phone from accessing the address that is printed when running the packager, you can often work around this issue by "tethering" your computer to your phone's internet connection. Some phones call this feature "mobile hotspot." While it's very convenient, if you have a data plan where you pay for data transfer you should be careful when using this feature, especially when installing dependencies from NPM. |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,3 @@ | ||
<resources> | ||
<string moduleConfig="true" name="reactNativeCodePush_androidDeploymentKey"></string> | ||
<string name="app_name">NativebaseKitchenSink</string> | ||
</resources> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,8 @@ | ||
keystore( | ||
name = 'debug', | ||
store = 'debug.keystore', | ||
properties = 'debug.keystore.properties', | ||
visibility = [ | ||
'PUBLIC', | ||
], | ||
name = "debug", | ||
properties = "debug.keystore.properties", | ||
store = "debug.keystore", | ||
visibility = [ | ||
"PUBLIC", | ||
], | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
rootProject.name = 'NativebaseKitchenSink' | ||
include ':react-native-code-push' | ||
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app') | ||
include ':react-native-vector-icons' | ||
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') | ||
|
||
include ':app' |
Oops, something went wrong.