-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: add react-native-web example. closes #671
This example is missing the drawer, but all other examples are there. There are rendering issues with few components on the web. Hopefully this example will make it easier to identify these issues and fix them in future.
- Loading branch information
Showing
57 changed files
with
3,697 additions
and
337 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 |
|---|---|---|
| @@ -1,129 +1 @@ | ||
| /* @flow */ | ||
|
|
||
| import { KeepAwake, Util } from 'expo'; | ||
| import * as React from 'react'; | ||
| import { StatusBar, I18nManager, AsyncStorage, Platform } from 'react-native'; | ||
| import { | ||
| Provider as PaperProvider, | ||
| DarkTheme, | ||
| DefaultTheme, | ||
| type Theme, | ||
| } from 'react-native-paper'; | ||
| import createReactContext from 'create-react-context'; | ||
| import { createDrawerNavigator } from 'react-navigation'; | ||
| import RootNavigator from './src/RootNavigator'; | ||
| import DrawerItems from './DrawerItems'; | ||
|
|
||
| type State = { | ||
| theme: Theme, | ||
| rtl: boolean, | ||
| }; | ||
|
|
||
| const PreferencesContext: any = createReactContext(); | ||
|
|
||
| const App = createDrawerNavigator( | ||
| { Home: { screen: RootNavigator } }, | ||
| { | ||
| contentComponent: () => ( | ||
| <PreferencesContext.Consumer> | ||
| {preferences => ( | ||
| <DrawerItems | ||
| toggleTheme={preferences.theme} | ||
| toggleRTL={preferences.rtl} | ||
| isRTL={preferences.isRTL} | ||
| isDarkTheme={preferences.isDarkTheme} | ||
| /> | ||
| )} | ||
| </PreferencesContext.Consumer> | ||
| ), | ||
| // set drawerPosition to support rtl toggle on android | ||
| drawerPosition: | ||
| Platform.OS === 'android' && I18nManager.isRTL ? 'right' : 'left', | ||
| } | ||
| ); | ||
|
|
||
| export default class PaperExample extends React.Component<{}, State> { | ||
| state = { | ||
| theme: DefaultTheme, | ||
| rtl: I18nManager.isRTL, | ||
| }; | ||
|
|
||
| async componentDidMount() { | ||
| StatusBar.setBarStyle('light-content'); | ||
|
|
||
| try { | ||
| const prefString = await AsyncStorage.getItem('preferences'); | ||
| const preferences = JSON.parse(prefString); | ||
|
|
||
| if (preferences) { | ||
| // eslint-disable-next-line react/no-did-mount-set-state | ||
| this.setState(state => ({ | ||
| theme: preferences.theme === 'dark' ? DarkTheme : DefaultTheme, | ||
| rtl: | ||
| typeof preferences.rtl === 'boolean' ? preferences.rtl : state.rtl, | ||
| })); | ||
| } | ||
| } catch (e) { | ||
| // ignore error | ||
| } | ||
| } | ||
|
|
||
| _savePreferences = async () => { | ||
| try { | ||
| AsyncStorage.setItem( | ||
| 'preferences', | ||
| JSON.stringify({ | ||
| theme: this.state.theme === DarkTheme ? 'dark' : 'light', | ||
| rtl: this.state.rtl, | ||
| }) | ||
| ); | ||
| } catch (e) { | ||
| // ignore error | ||
| } | ||
| }; | ||
|
|
||
| _toggleTheme = () => | ||
| this.setState( | ||
| state => ({ | ||
| theme: state.theme === DarkTheme ? DefaultTheme : DarkTheme, | ||
| }), | ||
| this._savePreferences | ||
| ); | ||
|
|
||
| _toggleRTL = () => | ||
| this.setState( | ||
| state => ({ | ||
| rtl: !state.rtl, | ||
| }), | ||
| async () => { | ||
| await this._savePreferences(); | ||
|
|
||
| I18nManager.forceRTL(this.state.rtl); | ||
| Util.reload(); | ||
| } | ||
| ); | ||
|
|
||
| render() { | ||
| return ( | ||
| <PaperProvider theme={this.state.theme}> | ||
| <PreferencesContext.Provider | ||
| value={{ | ||
| theme: this._toggleTheme, | ||
| rtl: this._toggleRTL, | ||
| isRTL: this.state.rtl, | ||
| isDarkTheme: this.state.theme === DarkTheme, | ||
| }} | ||
| > | ||
| <App | ||
| persistenceKey={ | ||
| process.env.NODE_ENV !== 'production' | ||
| ? 'NavigationStateDEV' | ||
| : null | ||
| } | ||
| /> | ||
| </PreferencesContext.Provider> | ||
| <KeepAwake /> | ||
| </PaperProvider> | ||
| ); | ||
| } | ||
| } | ||
| export { default } from './src/index'; |
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,5 @@ | ||
| import * as React from 'react'; | ||
| import { render } from 'react-dom'; | ||
| import App from './src/index'; | ||
|
|
||
| render(<App />, document.getElementById('root')); |
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,20 @@ | ||
| ## Run the example | ||
|
|
||
| - [View and edit it with Expo Snack](https://snack.expo.io/@satya164/github.com-callstack-react-native-paper:example) | ||
| - Run the example locally | ||
| + Clone the repository and `cd` to this directory | ||
| + Run `yarn` to install the dependencies | ||
| + Run `yarn start` to start the packager | ||
| + Follow the instructions to open it with the [Expo app](https://expo.io/) | ||
| # Example App for React Native Paper | ||
|
|
||
| ## React Native App | ||
|
|
||
| You can run the React Native app with [this Snack](https://snack.expo.io/@satya164/github.com-callstack-react-native-paper:example). Snack allows you to make changes to the example app directly in the online editor and see changes on your phone instantly using the [Expo](https://expo.io/) app without having to install or setup anything on your computer. You can also "Export" it to download as a standalone Expo app to run locally. | ||
|
|
||
| If you want to run the example from the repo, | ||
|
|
||
| - Clone the repository and `cd` to this directory | ||
| - Run `yarn` to install the dependencies | ||
| - Run `yarn start` to start the packager | ||
| - Follow the instructions to open it with the [Expo app](https://expo.io/) | ||
|
|
||
| ## Web App | ||
|
|
||
| You can also run the example app as a web app using [react-native-web](https://github.com/necolas/react-native-web), | ||
|
|
||
| - Clone the repository and `cd` to this directory | ||
| - Run `yarn` to install the dependencies | ||
| - Run `yarn web` to start the webpack server and open the app in your browser |
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
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,5 @@ | ||
| @font-face { | ||
| font-family: 'MaterialIcons'; | ||
| src: url('../../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf') | ||
| format('truetype'); | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <head> | ||
| <title>React Native Paper - Example</title> | ||
| <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500" rel="stylesheet"> | ||
| <style> | ||
| html, body, #root { | ||
| height: 100%; | ||
| font-family: 'Roboto', sans-serif; | ||
| } | ||
|
|
||
| #root { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script src="app.bundle.js"></script> | ||
| </body> |
File renamed without changes.
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
File renamed without changes.
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
File renamed without changes.
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
File renamed without changes.
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
File renamed without changes.
Oops, something went wrong.