React Native Web Extended
"React Native Web Extended" is a fork of React Native Web, with more components migrated from React Native.
Patch for React Native Web is available in the patch/react-native-web
branch.
Get Started
Install using npm:
npm install react-native-web-extended --save
Boilerplate is coming soon.
Extended components
Currently 3 more components from React Native are added.
Navigator
Navigator
from React Native is re-implemented with react-router.
Usage:
render() { const routes = [ {index: 0, title: 'Page 1'}, {index: 1, title: 'Page 2'}, ]; return ( <Navigator initialRoute={routes[0]} renderScene={(route, navigator) => <TouchableHighlight onPress={() => { if (route.index === 0) { navigator.push(routes[1]); } else { navigator.pop(); } }}> <Text>Hello! Route index is {route.index}, title is {route.title}</Text> </TouchableHighlight> } style={{padding: 100}} /> );}
Note:
- Currently supported props:
initialRoute
,renderScene
. index
key in theroute
object is required.initialRouteStack
prop is not supported, as we can't push multiple history states when the webpage loads.
TabBarIOS
Usage:
'use strict'; var React = require('react');var ReactNative = require('react-native');var { StyleSheet, TabBarIOS, Text, View,} = ReactNative; var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg=='; class TabBarExample extends React.Component { static title = '<TabBarIOS>'; static description = 'Tab-based navigation.'; static displayName = 'TabBarExample'; state = { selectedTab: 'redTab', notifCount: 0, presses: 0, }; _renderContent = (color: string, pageText: string, num?: number) => { return ( <View style={[styles.tabContent, {backgroundColor: color}]}> <Text style={styles.tabText}>{pageText}</Text> <Text style={styles.tabText}>{num} re-renders of the {pageText}</Text> </View> ); }; render() { return ( <TabBarIOS unselectedTintColor="yellow" tintColor="white" barTintColor="darkslateblue"> <TabBarIOS.Item title="Blue Tab" icon={{uri: base64Icon, scale: 3}} selected={this.state.selectedTab === 'blueTab'} onPress={() => { this.setState({ selectedTab: 'blueTab', }); }}> {this._renderContent('#414A8C', 'Blue Tab')} </TabBarIOS.Item> <TabBarIOS.Item title="Tab 2" icon={{uri: base64Icon, scale: 3}} badge={this.state.notifCount > 0 ? this.state.notifCount : undefined} selected={this.state.selectedTab === 'redTab'} onPress={() => { this.setState({ selectedTab: 'redTab', notifCount: this.state.notifCount + 1, }); }}> {this._renderContent('#783E33', 'Red Tab', this.state.notifCount)} </TabBarIOS.Item> <TabBarIOS.Item icon={require('./flux.png')} selectedIcon={require('./relay.png')} title="More" selected={this.state.selectedTab === 'greenTab'} onPress={() => { this.setState({ selectedTab: 'greenTab', presses: this.state.presses + 1 }); }}> {this._renderContent('#21551C', 'Green Tab', this.state.presses)} </TabBarIOS.Item> </TabBarIOS> ); }} var styles = StyleSheet.create({ tabContent: { flex: 1, alignItems: 'center', }, tabText: { color: 'white', margin: 50, },}); module.exports = TabBarExample;
note:
- Supported props for
TabBarIOS
:barTintColor
,tintColor
,unselectedTintColor
- Supported props for
TabBarIOS.Item
:title
,icon
,selectedIcon
,onPress
,selected
,badge
RefreshControl
Usage:
class RefreshableList extends Component { constructor(props) { super(props); this.state = { refreshing: false, }; } _onRefresh() { this.setState({refreshing: true}); fetchData().then(() => { this.setState({refreshing: false}); }); } render() { return ( <ListView refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} /> } ... > ... </ListView> ); } ...}
Extended APIs
Alert
Alert box with IOS theme. Vendor: Alert7. Alias: AlertIOS
Usage:
//Basic AlertAlert.alert('Title', 'Hello!'); //Multiple ButtonsAlert.alert( 'Alert Title', 'My Alert Msg', [ {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')}, {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, {text: 'OK', onPress: () => console.log('OK Pressed')}, ]); //Text InputAlertIOS.prompt( 'Title', 'Enter a message', text => console.log("You entered "+text));