updated to new version of RNElements

react-native-elements · Sep 13, 2016 · 526b91e · 526b91e
1 parent 75bc557
commit 526b91e
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "lodash": "^4.15.0",
     "react": "15.3.1",
     "react-native": "0.32.0",
-    "react-native-elements": "0.3.2",
+    "react-native-elements": "0.4.2",
     "react-native-tab-navigator": "^0.3.3",
     "react-native-vector-icons": "^2.1.0",
     "react-redux": "^4.4.5",

diff --git a/src/about/About.js b/src/about/About.js
@@ -6,7 +6,8 @@ import Icon from 'react-native-vector-icons/MaterialIcons'
 import {
   Text,
   Card,
-  SocialIcon
+  SocialIcon,
+  ButtonGroup
 } from 'react-native-elements'
 
 let styles = {}
@@ -39,13 +40,32 @@ const users = [
 ]
 
 class About extends Component {
+  constructor () {
+    super()
+    this.state = {
+      selectedIndex: 0
+    }
+    this.updateIndex = this.updateIndex.bind(this)
+  }
+  updateIndex (selectedIndex) {
+    this.setState({selectedIndex})
+  }
   render () {
+    const buttons = ['Button1', 'Button2']
+    const { selectedIndex } = this.state
     return (
       <ScrollView style={{backgroundColor: 'white'}}>
         <View style={styles.headerContainer}>
           <Icon color='white' name='invert-colors' size={62} />
           <Text style={styles.heading}>Components</Text>
         </View>
+        <View style={{marginTop: 20}}>
+          <ButtonGroup
+            textStyle={{fontSize: 13}}
+            onPress={this.updateIndex}
+            selectedIndex={selectedIndex}
+            buttons={buttons} />
+        </View>
         <View style={styles.container}>
           <Card
             title='CARD WITH DIVIDER'>

diff --git a/src/more/More.js b/src/more/More.js
@@ -6,7 +6,8 @@ let styles
 import {
   List,
   ListItem,
-  Text
+  Text,
+  SearchBar
 } from 'react-native-elements'
 
 const log = () => console.log('this is an example method')
@@ -86,7 +87,38 @@ class More extends Component {
       <ScrollView style={styles.mainContainer}>
         <View style={styles.hero}>
           <Icon color='white' name='sentiment-very-satisfied' size={62} />
-          <Text style={styles.heading}>List</Text>
+          <Text style={styles.heading}>Searchbar & List</Text>
+        </View>
+        <View style={{marginTop: 10, marginBottom: 0}}>
+          <SearchBar
+            placeholder='Type Here...' />
+        </View>
+        <View style={{marginTop: 10, marginBottom: 0}}>
+          <SearchBar
+            noIcon
+            placeholder='Type Here...' />
+        </View>
+        <View style={{marginTop: 10, marginBottom: 0}}>
+          <SearchBar
+            round
+            placeholder='Type Here...' />
+        </View>
+        <View style={{marginTop: 10, marginBottom: 0}}>
+          <SearchBar
+            lightTheme
+            placeholder='Type Here...' />
+        </View>
+        <View style={{marginTop: 10, marginBottom: 0}}>
+          <SearchBar
+            noIcon
+            lightTheme
+            placeholder='Type Here...' />
+        </View>
+        <View style={{marginTop: 10, marginBottom: 0}}>
+          <SearchBar
+            round
+            lightTheme
+            placeholder='Type Here...' />
         </View>
         <List>
           <ListView