Skip to content
This repository has been archived by the owner on Mar 30, 2022. It is now read-only.

Rework #108

Merged
merged 4 commits into from
Jun 30, 2020
Merged

Rework #108

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8655953
rework example app to simplify pages
Jun 30, 2020
a839a9c
readd inputs page
Jun 30, 2020
45a4b9b
fix merge
Jun 30, 2020
108c001
fix merge again
Jun 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
readd inputs page
  • Loading branch information
Jeremy Hamilton committed Jun 30, 2020
commit a839a9c50d916b5cd44b63453044164c529dcedd
2 changes: 2 additions & 0 deletions src/navigation/RootNavigator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Tiles from '../views/tiles';
import Buttons from '../views/buttons';
import Lists from '../views/lists';
import Lists2 from '../views/lists2';
import Inputs from '../views/inputs';
import Login from '../views/login';
import Pricing from '../views/pricing';
import Ratings from '../views/ratings';
Expand Down Expand Up @@ -37,6 +38,7 @@ function RootNavigator() {
>
<Drawer.Screen name="Avatars" component={Avatars} />
<Drawer.Screen name="Buttons" component={Buttons} />
<Drawer.Screen name="Inputs" component={Inputs} />
<Drawer.Screen name="Lists" component={Lists} />
<Drawer.Screen name="Lists2" component={Lists2} />
<Drawer.Screen name="Cards" component={Cards} />
Expand Down
7 changes: 5 additions & 2 deletions src/views/inputs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import {
ThemeProvider,
} from 'react-native-elements';

import { Header } from './header';

const SCREEN_WIDTH = Dimensions.get('window').width;

const dummySearchBarProps = {
Expand All @@ -27,7 +29,7 @@ const dummySearchBarProps = {
onChangeText: (text) => console.log('text:', text),
};

class InputHome extends Component {
class Inputs extends Component {
render() {
return (
<KeyboardAvoidingView
Expand All @@ -36,6 +38,7 @@ class InputHome extends Component {
enabled
keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 84}
>
<Header title="Inputs" />
<ScrollView
style={styles.container}
keyboardShouldPersistTaps="handled"
Expand Down Expand Up @@ -400,4 +403,4 @@ const styles = StyleSheet.create({
},
});

export default InputHome;
export default Inputs;
258 changes: 133 additions & 125 deletions src/views/lists2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { View, ScrollView, StyleSheet, Image, FlatList } from 'react-native';
import { View, StyleSheet, Image, FlatList } from 'react-native';
import { Text, ListItem } from 'react-native-elements';
import TouchableScale from 'react-native-touchable-scale';

Expand Down Expand Up @@ -91,132 +91,140 @@ const Lists2 = () => {
return (
<>
<Header title="Lists 2" />
<ScrollView>
<View style={{ backgroundColor: '#ECEFF1', paddingVertical: 8 }}>
{list2.map((l, i) => (
<ListItem
component={TouchableScale}
friction={90}
tension={100}
activeScale={0.95}
leftAvatar={{ rounded: true, source: { uri: l.avatar_url } }}
key={i}
linearGradientProps={{
colors: l.linearGradientColors,
start: [1, 0],
end: [0.2, 0],
}}
ViewComponent={LinearGradient}
title={l.name}
titleStyle={{ color: 'white', fontWeight: 'bold' }}
subtitleStyle={{ color: 'white' }}
subtitle={l.subtitle}
chevronColor="white"
chevron
containerStyle={{
marginHorizontal: 16,
marginVertical: 8,
borderRadius: 8,
}}
/>
))}
</View>

<View style={styles.list}>
{list2.map((l, i) => (
<ListItem
leftAvatar={{ title: l.name[0], source: { uri: l.avatar_url } }}
key={i}
onPress={log}
title={l.name}
subtitle={l.subtitle}
chevron
bottomDivider
/>
))}
</View>
<View style={styles.list}>
{list2.map((l, i) => (
<ListItem
key={i}
leftIcon={{
name: 'user-circle-o',
type: 'font-awesome',
color: 'blue',
}}
title={l.name}
titleStyle={{ color: 'red' }}
subtitle={l.subtitle}
rightTitle="11:00am"
rightTitleStyle={{ color: 'green' }}
rightSubtitle="12:00am"
bottomDivider
/>
))}
</View>
<View style={styles.list}>
<ListItem
title="Name"
input={{ placeholder: 'Type your name' }}
chevron
bottomDivider
/>
<ListItem
title="Switch that please 😲"
switch={{
value: switch1,
onValueChange: (value) => setSwitch1(value),
}}
bottomDivider
/>
<ListItem
title="Choose 🤯"
buttonGroup={{
buttons: ['Flower', 'Coco'],
selectedIndex: selectedButtonIndex,
onPress: (index) => setSelectedButtonIndex(index),
}}
bottomDivider
/>
<ListItem
title="Check that please 😢"
checkBox={{
checked: checkbox1,
onPress: () => setCheckbox1(!checkbox1),
}}
bottomDivider
/>
<ListItem
title="With a Badge ! 😻"
badge={{ value: '12' }}
bottomDivider
/>
<ListItem title="This thing is checked 😎" checkmark bottomDivider />
</View>
<View style={styles.list}>
<ListItem
title="Limited supply! Its like digital gold!"
subtitle={
<View style={styles.subtitleView}>
<Image
source={require('../images/rating.png')}
style={styles.ratingImage}
<FlatList
ListHeaderComponent={
<>
<View style={{ backgroundColor: '#ECEFF1', paddingVertical: 8 }}>
{list2.map((l, i) => (
<ListItem
component={TouchableScale}
friction={90}
tension={100}
activeScale={0.95}
leftAvatar={{ rounded: true, source: { uri: l.avatar_url } }}
key={i}
linearGradientProps={{
colors: l.linearGradientColors,
start: [1, 0],
end: [0.2, 0],
}}
ViewComponent={LinearGradient}
title={l.name}
titleStyle={{ color: 'white', fontWeight: 'bold' }}
subtitleStyle={{ color: 'white' }}
subtitle={l.subtitle}
chevronColor="white"
chevron
containerStyle={{
marginHorizontal: 16,
marginVertical: 8,
borderRadius: 8,
}}
/>
<Text style={styles.ratingText}>5 months ago</Text>
</View>
}
leftAvatar={{ source: require('../../assets/images/avatar1.jpg') }}
/>
</View>
))}
</View>

<View style={styles.list}>
<FlatList
data={list1}
keyExtractor={(a) => a.title}
renderItem={renderRow}
/>
</View>
</ScrollView>
<View style={styles.list}>
{list2.map((l, i) => (
<ListItem
leftAvatar={{
title: l.name[0],
source: { uri: l.avatar_url },
}}
key={i}
onPress={log}
title={l.name}
subtitle={l.subtitle}
chevron
bottomDivider
/>
))}
</View>
<View style={styles.list}>
{list2.map((l, i) => (
<ListItem
key={i}
leftIcon={{
name: 'user-circle-o',
type: 'font-awesome',
color: 'blue',
}}
title={l.name}
titleStyle={{ color: 'red' }}
subtitle={l.subtitle}
rightTitle="11:00am"
rightTitleStyle={{ color: 'green' }}
rightSubtitle="12:00am"
bottomDivider
/>
))}
</View>
<View style={styles.list}>
<ListItem
title="Name"
input={{ placeholder: 'Type your name' }}
chevron
bottomDivider
/>
<ListItem
title="Switch that please 😲"
switch={{
value: switch1,
onValueChange: (value) => setSwitch1(value),
}}
bottomDivider
/>
<ListItem
title="Choose 🤯"
buttonGroup={{
buttons: ['Flower', 'Coco'],
selectedIndex: selectedButtonIndex,
onPress: (index) => setSelectedButtonIndex(index),
}}
bottomDivider
/>
<ListItem
title="Check that please 😢"
checkBox={{
checked: checkbox1,
onPress: () => setCheckbox1(!checkbox1),
}}
bottomDivider
/>
<ListItem
title="With a Badge ! 😻"
badge={{ value: '12' }}
bottomDivider
/>
<ListItem
title="This thing is checked 😎"
checkmark
bottomDivider
/>
</View>
<View style={styles.list}>
<ListItem
title="Limited supply! Its like digital gold!"
subtitle={
<View style={styles.subtitleView}>
<Image
source={require('../images/rating.png')}
style={styles.ratingImage}
/>
<Text style={styles.ratingText}>5 months ago</Text>
</View>
}
leftAvatar={{
source: require('../../assets/images/avatar1.jpg'),
}}
/>
</View>
</>
}
data={list1}
keyExtractor={(a) => a.title}
renderItem={renderRow}
/>
</>
);
};
Expand Down