Nameless Package Manager

    react-native-web-extended

    0.0.7 • Public • Published

    React Native Web Extended

    npm version

    "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 the route 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 Alert
    Alert.alert('Title', 'Hello!');
     
    //Multiple Buttons
    Alert.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 Input
    AlertIOS.prompt(
      'Title',
      'Enter a message',
      text => console.log("You entered "+text)
    );

    Install

    npm i react-native-web-extended

    DownloadsWeekly Downloads

    2

    Version

    0.0.7

    License

    BSD-3-Clause

    Last publish

    Collaborators

    • chion82