native-base#Container JavaScript Examples
The following examples show how to use
native-base#Container.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: H2TLoading.js From expo-ticket-app with MIT License | 6 votes |
|
H2TLoading = () => (
<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<StatusBar style="light"/>
<Content padder style={{ flex: 1 }}>
<Spacer size={40}/>
<LottieView
loop={true}
autoPlay
speed={5}
style={{ width: '100%' }}
source={require('../../../images/home')}
/>
</Content>
</Container>
)
Example #2
| Source File: TicketView.js From expo-ticket-app with MIT License | 6 votes |
|
TicketView = ({ ticket }) => (
<Container style={{ backgroundColor: commonColor.backgroundColorLighter }}>
<StatusBar style="light"/>
<Content padder>
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<TextH2t style={{ fontSize: 30, paddingTop: 40, paddingBottom: 40, fontFamily: 'Montserrat_Bold' }}>
{ticket.title}
</TextH2t>
<TextH2t style={{ fontSize: 20, paddingTop: 10, paddingBottom: 10 }}>
{ticket.date}
</TextH2t>
<TextH2t style={{ fontSize: 20, paddingTop: 10, paddingBottom: 10 }}>
{ticket.hour}
</TextH2t>
<QRCode
value={`${Firebase.auth().currentUser.uid} ${ticket.uuid}`}
color={'#111'}
backgroundColor={'white'}
size={windowWidth - 20}
/>
</View>
</Content>
</Container>
)
Example #3
| Source File: Error.js From expo-ticket-app with MIT License | 6 votes |
|
Error = ({ content }) => (
<Container>
<Content>
<TextH2t>
{content}
</TextH2t>
</Content>
</Container>
)
Example #4
| Source File: BLElist.js From BLEServiceDiscovery with GNU General Public License v3.0 | 6 votes |
|
render() {
return (
<Container>
<Header />
<FlatList
data={this.props.BLEList}
renderItem={({ item }) =>
<>
<TouchableHighlight
onPress={() => this.handleClick(item)}
style={item.isConnectable ? styles.rowFront : styles.rowBack}
underlayColor={'#AAA'}
>
<View>
<Text>
{this.connectableString(item)}
</Text>
</View>
</TouchableHighlight>
</>
}
keyExtractor={item => item.id.toString()}
ListEmptyComponent={DataActivityIndicator}
/>
<Footer>
<BLE></BLE>
</Footer>
</Container>
);
}
Example #5
| Source File: BLE.js From BLEServiceDiscovery with GNU General Public License v3.0 | 6 votes |
|
render() {
return (
<Container>
<Text>
Status: {this.props.status}
</Text>
{this.props.connectedDevice && <Text>Device: {this.props.connectedDevice.name}</Text>}
</Container>
);
}
Example #6
| Source File: Error.js From react-native-expo-starter-kit with MIT License | 6 votes |
|
Error = ({ title, content, tryAgain }) => (
<Container style={{ flex: 1 }}>
<View style={{ alignSelf: 'center' }}>
<Spacer size={20} />
<H3 style={{ textAlign: 'center' }}>{title}</H3>
<Text style={{ textAlign: 'center', marginBottom: 20 }}>{content}</Text>
{tryAgain && (
<Button block onPress={tryAgain}>
<Text>Try Again</Text>
</Button>
)}
<Spacer size={20} />
</View>
</Container>
)
Example #7
| Source File: SettingsScreen.js From pandoa with GNU General Public License v3.0 | 6 votes |
|
render() {
return (
<Container>
<Header>
<Body>
<Title>Settings</Title>
</Body>
</Header>
<Content>
<List>
<ListItem
first
onPress={() => this.props.navigation.navigate("Billing")}
>
<Text>Notifications</Text>
</ListItem>
<ListItem>
<Text>User Settings</Text>
</ListItem>
<ListItem>
<Text>Billing</Text>
</ListItem>
<ListItem onPress={this.logout}>
<Text style={styles.logout}>Logout</Text>
</ListItem>
</List>
</Content>
</Container>
);
}
Example #8
| Source File: SplashScreen.js From inventory-management-rn with MIT License | 6 votes |
|
render() {
return (
<Container>
<Content>
<Body style={styles.container}>
<Image
style={{
width: 374,
height: 300,
justifyContent: 'center',
marginVertical: 40,
resizeMode: 'cover',
}}
source={require('../Images/store-inventory-logo.jpg')}
/>
</Body>
</Content>
</Container>
);
}
Example #9
| Source File: InventoryScreen.js From inventory-management-rn with MIT License | 6 votes |
|
TransactionsScreen = ({navigation}) => {
return (
<Container>
<HeaderView navigation={navigation} title={'Inventory'} />
<Tabs>
<Tab
activeTabStyle={{backgroundColor: '#4796BD'}}
tabStyle={{backgroundColor: '#4796BD'}}
textStyle={{color: '#fff'}}
activeTextStyle={{color: '#fff', fontWeight: 'bold'}}
heading="Inventory">
<InventoryListScreen />
</Tab>
<Tab
activeTabStyle={{backgroundColor: '#4796BD'}}
tabStyle={{backgroundColor: '#4796BD'}}
textStyle={{color: '#fff'}}
activeTextStyle={{color: '#fff', fontWeight: 'bold'}}
heading="Near expiry">
<ExpiryScreen />
</Tab>
</Tabs>
</Container>
);
}
Example #10
| Source File: DrawerScreen2.js From inventory-management-rn with MIT License | 6 votes |
|
DrawerScreen2 = ({ navigation }) => {
return (
<Container>
<HeaderView navigation={navigation} />
<Tabs>
<Tab activeTabStyle={{ backgroundColor: '#4796BD' }} tabStyle={{ backgroundColor: '#4796BD' }} heading="Buy">
<Buy navigation={navigation} />
</Tab>
<Tab activeTabStyle={{ backgroundColor: '#4796BD' }} tabStyle={{ backgroundColor: '#4796BD' }} heading="Sell">
<Sell />
</Tab>
</Tabs>
</Container>
);
}
Example #11
| Source File: TransactionsScreen.js From inventory-management-rn with MIT License | 6 votes |
|
TransactionsScreen = ({navigation}) => {
return (
<Container>
<HeaderView navigation={navigation} title={'Transactions'} />
<Tabs>
<Tab
activeTabStyle={{backgroundColor: '#4796BD'}}
tabStyle={{backgroundColor: '#4796BD'}}
heading="Buy">
<Buy />
</Tab>
<Tab
activeTabStyle={{backgroundColor: '#4796BD'}}
tabStyle={{backgroundColor: '#4796BD'}}
heading="Sell">
<Sell />
</Tab>
<Tab
activeTabStyle={{backgroundColor: '#4796BD'}}
tabStyle={{backgroundColor: '#4796BD'}}
heading="History">
<History />
</Tab>
</Tabs>
</Container>
);
}
Example #12
| Source File: About.js From react-native-expo-starter-kit with MIT License | 6 votes |
|
About = () => (
<Container>
<Content padder>
<Spacer size={30} />
<H1>Heading 1</H1>
<Spacer size={10} />
<Text>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
{' '}
</Text>
<Spacer size={30} />
<H2>Heading 2</H2>
<Spacer size={10} />
<Text>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
{' '}
</Text>
<Spacer size={30} />
<H3>Heading 3</H3>
<Spacer size={10} />
<Text>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
{' '}
</Text>
</Content>
</Container>
)
Example #13
| Source File: Single.js From react-native-expo-starter-kit with MIT License | 5 votes |
|
ArticlesSingle = ({
error, loading, article, reFetch,
}) => {
if (error) {
return <Error content={error} tryAgain={reFetch} />;
}
if (loading) {
return <Loading content={loading} />;
}
if (Object.keys(article).length < 1) {
return <Error content={errorMessages.articles404} />;
}
return (
<Container>
<Content padder>
{!!article.image && (
<Image
source={{ uri: article.image }}
style={{
height: 200, width: null, flex: 1, resizeMode: 'contain',
}}
/>
)}
<Spacer size={25} />
<H3>{article.name}</H3>
<Spacer size={15} />
{!!article.content && (
<Card>
<CardItem header bordered>
<Text>Content</Text>
</CardItem>
<CardItem>
<Body>
<Text>{article.content}</Text>
</Body>
</CardItem>
</Card>
)}
<Spacer size={20} />
</Content>
</Container>
);
}
Example #14
| Source File: Form.js From react-native-expo-starter-kit with MIT License | 5 votes |
|
ArticlesForm = ({
error, loading, success, onFormSubmit, defaultValues,
}) => {
const {
register, handleSubmit, errors, setValue,
} = useForm({ defaultValues });
useEffect(() => {
register({ name: 'email' }, { required: errorMessages.missingEmail });
}, [register]);
return (
<Container>
<Content padder>
<Header
title="Example form"
content="When you submit the form, it'll simply save to your redux store"
/>
{error && <Messages message={error} />}
{loading && <Messages type="info" message="Loading..." />}
{success && <Messages type="success" message={success} />}
<Form>
<Item stackedLabel>
<Label>Email*</Label>
<Input
type="text"
autoCapitalize="none"
placeholder="[email protected]"
keyboardType="email-address"
defaultValue={defaultValues.email || ''}
onChangeText={(value) => setValue('email', value)}
/>
</Item>
{errors.email && <Text>{errors.email.message}</Text>}
<Spacer size={20} />
<Button block onPress={handleSubmit(onFormSubmit)} disabled={loading}>
<Text>{loading ? 'Loading' : 'Submit'}</Text>
</Button>
</Form>
</Content>
</Container>
);
}
Example #15
| Source File: List.js From react-native-expo-starter-kit with MIT License | 5 votes |
|
ArticlesList = ({
error, loading, listFlat, reFetch, meta,
}) => {
if (error) {
return <Error content={error} tryAgain={reFetch} />;
}
if (listFlat.length < 1) {
return <Error content={errorMessages.articlesEmpty} />;
}
return (
<Container style={{ padding: 10 }}>
<FlatList
data={listFlat}
onRefresh={() => reFetch({ forceSync: true })}
refreshing={loading}
renderItem={({ item }) => (
<Card style={{ opacity: item.placeholder ? 0.3 : 1 }}>
<TouchableOpacity
activeOpacity={0.8}
onPress={() => (
!item.placeholder
? Actions.articlesSingle({ id: item.id, title: item.name })
: null
)}
style={{ flex: 1 }}
>
<CardItem cardBody>
{!!item.image && (
<Image
source={{ uri: item.image }}
style={{
height: 100,
width: null,
flex: 1,
overflow: 'hidden',
borderRadius: 5,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
}}
/>
)}
</CardItem>
<CardItem cardBody>
<Body style={{ paddingHorizontal: 15 }}>
<Spacer size={10} />
<Text style={{ fontWeight: '800' }}>{item.name}</Text>
<Spacer size={15} />
{!!item.excerpt && <Text>{item.excerpt}</Text>}
<Spacer size={5} />
</Body>
</CardItem>
</TouchableOpacity>
</Card>
)}
keyExtractor={(item) => `${item.id}-${item.name}`}
ListFooterComponent={(meta && meta.page && meta.lastPage && meta.page < meta.lastPage)
? () => (
<React.Fragment>
<Spacer size={20} />
<Button
block
bordered
onPress={() => reFetch({ incrementPage: true })}
>
<Text>Load More</Text>
</Button>
</React.Fragment>
) : null}
/>
<Spacer size={20} />
</Container>
);
}
Example #16
| Source File: ForgotPassword.js From expo-ticket-app with MIT License | 5 votes |
|
render () {
const { loading, error, success } = this.props;
const { email } = this.state;
return (
<KeyboardAvoidingView
style={{ backgroundColor: commonColor.backgroundColor, flex: 1 }}
behavior={(Platform.OS === 'ios') ? 'padding' : null}
enabled
keyboardVerticalOffset={Platform.select({ ios: 80, android: 500 })}>
<ScrollView contentContainerStyle={{ height: 400 }}>
<StatusBar style="light"/>
<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<Content padder>
<Card style={{ backgroundColor: commonColor.backgroundColor }}>
{error && <View style={{ margin: 10 }}><Messages message={error}/></View>}
{success &&
<View style={{ margin: 10 }}><Messages type="success" message={success}/></View>}
<Form>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
{i18n.t('login.forgotLabel')}
</Label>
<Input
style={{ color: '#fff', fontFamily: 'Montserrat' }}
autoCapitalize="none"
value={email}
keyboardType="email-address"
disabled={loading}
onChangeText={v => this.handleChange('email', v)}
/>
</Item>
<Spacer size={20}/>
<ButtonH2t text={'login.forgotBtn'} loading={loading} onPress={this.handleSubmit}/>
</Form>
</Card>
</Content>
</Container>
</ScrollView>
</KeyboardAvoidingView>
);
}
Example #17
| Source File: Home.js From expo-ticket-app with MIT License | 5 votes |
|
Home = ({ member }) => {
return (
<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<StatusBar style="light"/>
<Content padder>
<Spacer size={10}/>
<TextI18n style={{ color: '#ffffff', textAlign: 'center', fontSize: 35, margin: 16 }}>
homepage.title
</TextI18n>
<CardH2t
source={require('../../images/Events/blueBackgroung.png')}
onPress={() => Actions.jump('events')}
text1="homepage.card1Text1"
text2="homepage.card1Text2"
/>
<Spacer size={20}/>
{(member && member.email) ? (
<View>
<CardH2t
onPress={() => {
Actions.jump('tickets');
}}
text1="homepage.card2Text1"
text2="homepage.card2Text2"
/>
<Spacer size={40}/>
</View>
) : (
<CardH2t
source={require('../../images/Events/account.jpg')}
onPress={Actions.login}
text1="homepage.cardSignInText1"
text2="homepage.cardSignInText2"
/>
)}
<Spacer size={80}/>
</Content>
</Container>
);
}
Example #18
| Source File: Welcome.js From expo-ticket-app with MIT License | 5 votes |
|
render() {
const { loading } = this.props;
return (<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<StatusBar style="light"/>
<Content padder style={{ flex: 1 }}>
<Spacer size={60}/>
<Text style={{
flex: 1,
fontSize: 55,
fontWeight: '400',
fontFamily: 'Montserrat_Bold',
color: 'white',
textAlign: 'center',
}}>
{'Expo\nTicket App'}
</Text>
<LottieView
loop={true}
autoPlay
speed={1.5}
style={{ width: '100%' }}
source={require('../../../images/home')}
/>
{!loading && <View>
<Card style={{ backgroundColor: commonColor.brandStyle }}>
<ListItem onPress={Actions.login} icon first>
<Left>
<Icon name="log-in" style={{ color: 'white' }}/>
</Left>
<Body style={{ borderBottomWidth: 0 }}>
<TextI18n style={{
color: 'white',
fontSize: 20
}}>
login.connect
</TextI18n>
</Body>
</ListItem>
<ListItem onPress={Actions.signUp} icon>
<Left>
<Icon name="add-circle" style={{ color: 'white' }}/>
</Left>
<Body style={{ borderBottomWidth: 0 }}>
<TextI18n style={{
color: 'white',
fontSize: 20
}}>
login.signUp
</TextI18n>
</Body>
</ListItem>
</Card>
<TextI18n
onPress={Actions.tabbar}
style={{
flex: 1,
fontSize: 13,
fontWeight: '400',
fontFamily: 'Montserrat',
paddingTop: 10,
color: 'white',
textAlign: 'center',
textDecorationLine: 'underline',
}}>
login.withoutAccount
</TextI18n>
</View>}
{loading && <Loading/>}
</Content>
</Container>);
}
Example #19
| Source File: TabView.js From WhatsApp-Clone with MIT License | 5 votes |
|
TabView = ({navigation}) => (
<Container>
<Tabs
initialPage={0}
style={{elevation: 0, marginTop: -25}}
tabContainerStyle={{
elevation: 0,
height: '8%',
}}
tabBarUnderlineStyle={{
height: 2,
backgroundColor: WHITE,
}}>
{/* <Tab
heading={
<TabHeading style={styles.tabStyle}>
<Icon style={styles.tabTextStyle} name="camera" />
</TabHeading>
}>
<CameraComponent />
</Tab> */}
<Tab
heading={
<TabHeading style={styles.tabStyle}>
<Text uppercase style={styles.tabTextStyle}>
Chats
</Text>
</TabHeading>
}>
<ChatListView navigation={navigation} />
</Tab>
<Tab
heading={
<TabHeading style={styles.tabStyle}>
<Text uppercase style={styles.tabTextStyle}>
Status
</Text>
</TabHeading>
}>
<StatusView navigation={navigation} />
</Tab>
{/* <Tab
heading={
<TabHeading style={styles.tabStyle}>
<Text uppercase style={styles.tabTextStyle}>
Calls
</Text>
</TabHeading>
}>
<CallsView />
</Tab> */}
</Tabs>
</Container>
)
Example #20
| Source File: index.js From aws-appsync-refarch-offline with MIT No Attribution | 5 votes |
|
Settings = (props) => {
async function createProducts() {
try {
await loadProducts();
Toast.show({
text: 'Products loaded, pull to refresh',
buttonText: "Ok",
duration: 3000
});
props.navigation.navigate('Checkout');
} catch(error) {
Toast.show({
text: error,
buttonText: "Ok",
duration: 3000
});
}
}
async function clearDataStore() {
await DataStore.clear();
Toast.show({
text: 'Storage cleared, pull to refresh',
buttonText: "Ok",
duration: 3000
});
props.navigation.navigate('Checkout');
}
return (
<Container>
<Content>
<Button block info style={styles.settingsBtn} onPress={createProducts}>
<Text>Create dummy products</Text>
</Button>
<Button block info style={styles.settingsBtn} onPress={clearDataStore}>
<Text>Clear local storage</Text>
</Button>
</Content>
</Container>
);
}
Example #21
| Source File: index.js From aws-appsync-refarch-offline with MIT No Attribution | 5 votes |
|
Receipt = ({ route }) => {
const { order } = route.params;
const lineItemList = order.lineItems.map(lineItem => (
<ListItem icon key={lineItem.id}>
<Left>
<Text>{lineItem.qty}</Text>
</Left>
<Body>
<Text>{lineItem.description}</Text>
</Body>
<Right>
<Text>${lineItem.total.toFixed(2)}</Text>
</Right>
</ListItem>
));
return (
<Container>
<Content>
<List>
<ListItem itemDivider>
<Text> </Text>
</ListItem>
<ListItem>
<Body>
<Text>Order Number</Text>
<Text note>{order.id}</Text>
</Body>
</ListItem>
<ListItem>
<Body>
<Text>Date</Text>
<Text note>{moment(order.createdAt).format('YYYY-MM-DD hh:mm A')}</Text>
</Body>
</ListItem>
<ListItem itemDivider>
<Text> </Text>
</ListItem>
{lineItemList}
<ListItem itemDivider>
<Text> </Text>
</ListItem>
<ListItem>
<Body>
<Text style={styles.subtotalsTxt}>Subtotal</Text>
</Body>
<Right>
<Text>${order.subtotal.toFixed(2)}</Text>
</Right>
</ListItem>
<ListItem>
<Body>
<Text style={styles.subtotalsTxt}>Tax</Text>
</Body>
<Right>
<Text>${order.tax.toFixed(2)}</Text>
</Right>
</ListItem>
<ListItem>
<Body>
<Text style={styles.subtotalsTxt}>Total</Text>
</Body>
<Right>
<Text>${order.total.toFixed(2)}</Text>
</Right>
</ListItem>
<ListItem itemDivider>
<Text> </Text>
</ListItem>
</List>
</Content>
</Container>
);
}
Example #22
| Source File: index.js From aws-appsync-refarch-offline with MIT No Attribution | 5 votes |
|
Orders = (props) => {
const [loading, setLoading] = useState(false);
const [orders, setOrders] = useState([]);
useEffect(() => {
refetch();
const subscription = DataStore.observe(Order).subscribe(msg => refetch());
return () => subscription.unsubscribe();
}, []);
async function refetch() {
const data = await DataStore.query(Order);
const sortedOrders = data.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
setOrders(sortedOrders);
}
async function openReceipt(orderId) {
const order = await DataStore.query(Order, orderId);
const allItems = await DataStore.query(LineItem);
const lineItems = allItems.filter(li => li.order && li.order.id === order.id);
return props.navigation.push('Receipt', {
order: {
...order,
lineItems,
}
});
}
return (
<Container>
<Content refreshControl={
<RefreshControl
onRefresh={refetch}
refreshing={loading}
/>
}>
<OrderList orders={orders} onSelectOrder={openReceipt} />
</Content>
</Container>
)
}
Example #23
| Source File: index.js From aws-appsync-refarch-offline with MIT No Attribution | 5 votes |
|
function Catalog(props) {
const [loading, setLoading] = useState(false);
const [products, setProducts] = useState([]);
const order = useSelector(state => state.order);
const dispatch = useDispatch();
useEffect(() => {
fetchProducts();
}, []);
async function fetchProducts() {
const data = await DataStore.query(Product);
setProducts(data);
};
function checkoutBtnHandler() {
return props.navigation.push('Checkout');
}
function addProductHandler(product) {
dispatch(addLineItem(product));
}
const productList = products.map(product => (
<ListItem thumbnail key={product.id}>
<Left>
<Thumbnail square source={{ uri: product.image }} />
</Left>
<Body>
<Text>{product.name}</Text>
<Text note numberOfLines={1}>${product.price}</Text>
</Body>
<Right>
<Button onPress={() => addProductHandler(product)}>
<Text>Add</Text>
</Button>
</Right>
</ListItem>
));
return (
<Container>
<Content refreshControl={
<RefreshControl
onRefresh={fetchProducts}
refreshing={loading}
/>
}>
<Button block info style={styles.checkoutBtn} onPress={checkoutBtnHandler}>
<Text style={styles.quantityText}>{order.totalQty}</Text>
<Text style={styles.subtotalTxt}>Subtotal ${order.subtotal.toFixed(2)}</Text>
</Button>
<List>
{productList}
</List>
</Content>
</Container>
);
}
Example #24
| Source File: StatusView.js From WhatsApp-Clone with MIT License | 4 votes |
|
StatusView = ({navigation}) => {
var [state, dispatch] = useReducer(statusReducer, statusState);
var {statusData, recentStatusList, viewedStatusList, refresh} = state;
useFocusEffect(
React.useCallback(() => {
getUserStatusFromAPI(dispatch);
}, []),
);
useEffect(() => {
listenSocket();
// return () => {
// alert('STATUS DISCONNECTED');
// socket.removeListener(constants.USER_STATUS);
// };
}, []);
function listenSocket() {
// socket.removeListener(constants.CHAT_LIST);
socket.on(constants.USER_STATUS, async statusModel => {
const id = await getLocalData(constants.USER_ID);
if (statusModel.userId != id) {
console.log('STATUS RECEIVED');
getUserStatusFromAPI(dispatch);
}
});
}
return (
<Container>
<ScrollView nestedScrollEnabled style={{flex: 1, paddingBottom: 200}}>
<View>
<MyStatusView
navigation={navigation}
statusData={statusData}
isUser
isBorder={false}
/>
{recentStatusList.length > 0 && (
<View>
<_Divider style={{borderBottomWidth: 5}} />
<Text style={[DEFAULT_STYLES.poppinsSemiBold, styles.userTime]}>
RECENT UPDATES
</Text>
<RecentStatusView
navigation={navigation}
statusData={recentStatusList}
/>
</View>
)}
{viewedStatusList.length > 0 && (
<View>
<_Divider style={{borderBottomWidth: 5}} />
<Text style={[DEFAULT_STYLES.poppinsSemiBold, styles.userTime]}>
VIEWED UPDATES
</Text>
<ViewedStatusView
navigation={navigation}
statusData={viewedStatusList}
/>
</View>
)}
</View>
</ScrollView>
<View
style={{
flexDirection: 'column',
position: 'absolute',
bottom: 20,
right: 20,
}}>
<Button
rounded
style={{
backgroundColor: APP_BG_COLOR,
width: 50,
alignSelf: 'center',
height: 50,
}}>
<Icon
style={{color: TEXT_SUBTITLE, fontSize: 22}}
name="pencil"
type="MaterialCommunityIcons"
/>
</Button>
<Button
rounded
color={GREEN}
style={styles.btnView}
onPress={() => {
navigation.navigate(NAV_TYPES.CAMERA_VIEW, {});
}}>
<Thumbnail circular source={ADD_STATUS} style={styles.thumbView} />
</Button>
</View>
{/* <Fab
active={true}
direction="up"
style={{backgroundColor: '#5067FF', position: 'absolute'}}
position="bottomRight">
<Thumbnail source={ADD_STATUS} />
<Button style={{backgroundColor: '#EEF5F6'}}>
<Icon
style={{color: TEXT_SUBTITLE, fontSize: 24}}
name="pencil"
type="MaterialCommunityIcons"
/>
</Button>
</Fab> */}
</Container>
);
}
Example #25
| Source File: Login.js From expo-ticket-app with MIT License | 4 votes |
|
render () {
const { loading, error, success } = this.props;
const { email } = this.state;
return (
<KeyboardAvoidingView
style={{ backgroundColor: commonColor.backgroundColor, flex: 1 }}
behavior={(Platform.OS === 'ios') ? 'padding' : null}
enabled
keyboardVerticalOffset={Platform.select({ ios: 80, android: 500 })}>
<StatusBar style="light"/>
<ScrollView>
<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<Content padder>
<Spacer size={60}/>
<Text style={{
flex: 1,
fontSize: 75,
fontWeight: '400',
fontFamily: 'Montserrat_Bold',
color: 'white',
textAlign: 'center',
}}>
{'H2T.'}
</Text>
<Spacer size={60}/>
<Card style={{ backgroundColor: commonColor.backgroundColor }}>
{error && <View style={{ margin: 10 }}><Messages message={error}/></View>}
{success &&
<View style={{ margin: 10 }}><Messages type="success" message={success}/></View>}
<Form>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{
color: '#fff',
fontFamily: 'Montserrat',
}}>{i18n.t('login.fields.email')}</Label>
<Input
style={{ color: '#fff', fontFamily: 'Montserrat' }}
autoCapitalize="none"
value={email}
keyboardType="email-address"
disabled={loading}
returnKeyType={'next'}
onChangeText={v => this.handleChange('email', v)}
onSubmitEditing={() => { this.focusTheField('field2'); }}
blurOnSubmit={false}
/>
</Item>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{
color: '#fff',
fontFamily: 'Montserrat',
}}>{i18n.t('login.fields.password')}</Label>
<Input
getRef={input => { this.inputs['field2'] = input; }}
style={{ color: '#fff', fontFamily: 'Montserrat' }}
secureTextEntry
disabled={loading}
returnKeyType={'go'}
onChangeText={v => this.handleChange('password', v)}
onSubmitEditing={this.handleSubmit}
/>
</Item>
<Spacer size={20}/>
<ButtonH2t text={'login.connect'} loading={loading} onPress={this.handleSubmit}/>
</Form>
<ListItem onPress={Actions.forgotPassword} icon>
<Left>
<Icon style={{ color: 'white' }} name="help-buoy"/>
</Left>
<Body style={{ borderBottomWidth: 0 }}>
<TextI18n style={{ color: 'white' }}>
login.forgotPassword
</TextI18n>
</Body>
</ListItem>
</Card>
</Content>
</Container>
</ScrollView>
</KeyboardAvoidingView>
);
}
Example #26
| Source File: Profile.js From expo-ticket-app with MIT License | 4 votes |
|
Profile = ({ member, logout, switchLanguage }) => (
<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<StatusBar style="light"/>
<Content>
<Spacer size={50}/>
<List>
{(member && member.email) ? (
<View>
<Content padder>
<Header
title={`${member.firstName}`}
content={`${i18n.t('profile.connectWith')} : ${member.email}`}
/>
</Content>
<ListItem onPress={switchLanguage} icon>
<Left>
<Icon style={{ color: '#fff' }} name="language"
type="MaterialIcons"/>
</Left>
<Body style={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
}}>
<TextI18n>
global.currentLanguage
</TextI18n>
<TextH2t style={{ fontSize: 20, marginRight: 20 }}>
{member.locale === 'fr' && 'Fr ??'}
{member.locale === 'en' && 'En ??'}
</TextH2t>
</Body>
</ListItem>
<ListItem onPress={Actions.updateProfile} icon>
<Left>
<Icon style={{ color: '#fff' }} name="person-add"/>
</Left>
<Body>
<TextI18n>profile.myAccount</TextI18n>
</Body>
</ListItem>
<ListItem onPress={logout} icon>
<Left>
<Icon style={{ color: '#fff' }} name="power"/>
</Left>
<Body>
<TextI18n>profile.logout</TextI18n>
</Body>
</ListItem>
<Spacer size={20}/>
{member.role && member.role.toLowerCase().includes('admin') &&
<ListItem onPress={Actions.scan} icon>
<Left>
<Icon style={{ fontSize: 23, color: '#fff' }} type="AntDesign" name="scan1"/>
</Left>
<Body>
<TextI18n>profile.scan</TextI18n>
</Body>
</ListItem>}
</View>
) : (
<View>
<Spacer size={40}/>
<ListItem onPress={switchLanguage} icon>
<Left>
<Icon style={{ color: '#fff' }} name="language"
type="MaterialIcons"/>
</Left>
<Body style={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
borderBottomWidth: 0,
}}>
<TextI18n>
global.currentLanguage
</TextI18n>
<TextH2t style={{ fontSize: 20, marginRight: 20 }}>
{member.locale === 'fr' ? 'Fr ??' : 'En ??'}
</TextH2t>
</Body>
</ListItem>
<CardH2t
source={require('../../../images/Events/account.jpg')}
onPress={Actions.login}
text1="login.connect"
text2="login.connectText"
/>
<CardH2t
source={require('../../../images/Events/signIn.jpg')}
onPress={Actions.signUp}
text1="login.signUp"
text2="login.signUpText"
/>
<Spacer size={80}/>
</View>
)}
</List>
</Content>
</Container>
)
Example #27
| Source File: SignUp.js From expo-ticket-app with MIT License | 4 votes |
|
render () {
const { loading, error, success } = this.props;
return (
<KeyboardAvoidingView
style={{ backgroundColor: commonColor.backgroundColor, flex: 1 }}
behavior={(Platform.OS === 'ios') ? 'padding' : null}
enabled
keyboardVerticalOffset={Platform.select({ ios: 80, android: 500 })}>
<StatusBar style="light"/>
<ScrollView>
<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<Content padder>
<Card style={{ marginTop: 10, backgroundColor: commonColor.backgroundColor }}>
<View padder>
{error && <View style={{ margin: 10 }}><Messages message={error}/></View>}
{success &&
<View style={{ margin: 10 }}><Messages type="success" message={success}/></View>}
<Form>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
{i18n.t('login.fields.firstName')}
</Label>
<Input
disabled={loading}
style={{ color: '#fff', fontFamily: 'Montserrat' }}
onChangeText={v => this.handleChange('firstName', v)}
/>
</Item>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
{i18n.t('login.fields.lastName')}
</Label>
<Input
disabled={loading}
style={{ color: '#fff', fontFamily: 'Montserrat' }}
onChangeText={v => this.handleChange('lastName', v)}
/>
</Item>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
{i18n.t('login.fields.email')}
</Label>
<Input
disabled={loading}
style={{ color: '#fff', fontFamily: 'Montserrat' }}
autoCapitalize="none"
keyboardType="email-address"
onChangeText={v => this.handleChange('email', v)}
/>
</Item>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
{i18n.t('login.fields.password')}
</Label>
<Input
disabled={loading}
style={{ color: '#fff', fontFamily: 'Montserrat' }}
secureTextEntry
onChangeText={v => this.handleChange('password', v)}
/>
</Item>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
{i18n.t('login.fields.confirmPassword')}
</Label>
<Input
disabled={loading}
style={{ color: '#fff', fontFamily: 'Montserrat' }}
secureTextEntry
selectionColor={'white'}
onChangeText={v => this.handleChange('password2', v)}
/>
</Item>
<Spacer size={40}/>
<ButtonH2t text={'login.signUp'} loading={loading} onPress={this.handleSubmit}/>
</Form>
</View>
</Card>
</Content>
</Container>
</ScrollView>
</KeyboardAvoidingView>
);
}
Example #28
| Source File: UpdateProfile.js From expo-ticket-app with MIT License | 4 votes |
|
render () {
const { loading, error, success } = this.props;
const {
firstName, lastName, email, changeEmail, changePassword,
} = this.state;
return (
<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<StatusBar style="light"/>
<Content padder>
<Header
title={i18n.t('profile.myAccount')}
content={i18n.t('profile.updateAccount')}
/>
{error && <Messages message={error}/>}
{success && <Messages message={success} type="success"/>}
<Form>
<Item stackedLabel>
<Label style={{ fontFamily: 'Montserrat', color: '#fff' }}>
{i18n.t('login.fields.firstName')}
</Label>
<Input
value={firstName}
style={{ fontFamily: 'Montserrat', color: '#fff' }}
disabled={loading}
onChangeText={v => this.handleChange('firstName', v)}
/>
</Item>
<Item stackedLabel>
<Label style={{ fontFamily: 'Montserrat', color: '#fff' }}>
{i18n.t('login.fields.lastName')}
</Label>
<Input
value={lastName}
style={{ fontFamily: 'Montserrat', color: '#fff' }}
disabled={loading}
onChangeText={v => this.handleChange('lastName', v)}
/>
</Item>
<ListItem icon onPress={() => this.handleChange('changeEmail', !changeEmail)}>
<Body>
<TextH2t>{i18n.t('login.fields.email')}</TextH2t>
</Body>
</ListItem>
{changeEmail && (
<Item stackedLabel>
<Label style={{ fontFamily: 'Montserrat', color: '#fff' }}>{i18n.t('login.fields.email')}</Label>
<Input
autoCapitalize="none"
value={email}
style={{ fontFamily: 'Montserrat', color: '#fff' }}
keyboardType="email-address"
disabled={loading}
onChangeText={v => this.handleChange('email', v)}
/>
</Item>
)}
<ListItem icon onPress={() => this.handleChange('changePassword', !changePassword)}>
<Body>
<TextH2t>{i18n.t('profile.updatePassword')}</TextH2t>
</Body>
</ListItem>
{changePassword && (
<View padder>
<Item stackedLabel>
<Label style={{ fontFamily: 'Montserrat', color: '#fff' }}>{i18n.t('login.fields.password')}</Label>
<Input
secureTextEntry
style={{ fontFamily: 'Montserrat', color: '#fff' }}
onChangeText={v => this.handleChange('password', v)}
disabled={loading}
/>
</Item>
<Item stackedLabel last>
<Label style={{ fontFamily: 'Montserrat', color: '#fff' }}>{i18n.t('login.fields.confirmPassword')}</Label>
<Input
secureTextEntry
style={{ fontFamily: 'Montserrat', color: '#fff' }}
onChangeText={v => this.handleChange('password2', v)}
disabled={loading}
/>
</Item>
</View>
)}
<Spacer size={20}/>
<ButtonH2t text={'login.update'} onPress={this.handleSubmit}/>
</Form>
</Content>
</Container>
);
}
Example #29
| Source File: ContactsView.js From WhatsApp-Clone with MIT License | 4 votes |
|
ContactsView = ({navigation, route}) => {
const [contacts, setContacts] = useState([]);
useEffect(() => {
getRegisteredUsers();
}, []);
const getRegisteredUsers = () => {
getLoggedInUserList()
.then(async res => {
console.log('User List Response => ', res.data);
if (res.data.success) {
var userList = res.data.data;
var ownerID = await getLocalData(constants.USER_ID);
for (let index = 0; index < userList.length; index++) {
const user = userList[index];
if (user.userId === ownerID) {
userList.splice(index, 1);
}
}
setContacts(userList);
}
})
.catch(err => {
console.log('User List Error => ', err);
});
};
const getAllContacts = () => {
if (Platform.OS === 'android') {
console.log('PLATFORM => ', Platform.OS);
PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_CONTACTS,
{
title: 'Contacts',
message: 'This app would like to view your contacts.',
buttonPositive: 'Accept',
},
)
.then(flag => {
console.log('WRITE_CONTACTS Permission Granted => ', flag);
if (flag === 'granted') {
PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
{
title: 'Contacts',
message: 'This app would like to view your contacts.',
buttonPositive: 'Accept',
},
)
.then(flag => {
console.log('READ_CONTACTS Permission Granted => ', flag);
if (flag === 'granted') {
fectchContacts();
}
})
.catch(() => {
console.log('READ_CONTACTS Permission Denied');
});
}
})
.catch(() => {
console.log('WRITE_CONTACTS Permission Denied');
});
} else {
fectchContacts();
}
};
const fectchContacts = () => {
Contacts.getAll((err, contacts) => {
if (err === 'denied') {
// error
console.log('fectchContacts Error');
} else {
// contacts returned in Array
// console.log(JSON.stringify(contacts));
setContacts(contacts);
}
});
};
return (
<SafeAreaView style={{flex: 1}}>
<Container>
<ContactsHeaderView
item={contacts ? contacts.length : 0}
navigation={navigation}
/>
{contacts.length <= 0 && <EmptyComponent message={'No User Found'} />}
<FlatList
// contentContainerStyle={DEFAULT_STYLES.container}
data={contacts}
keyExtractor={(item, index) => index.toString()}
ItemSeparatorComponent={() => {
return <_Divider />;
}}
renderItem={({item}) => {
return (
<ContactsItem
item={item}
navigation={navigation}
userChatList={route.params.chatList}
/>
);
}}
/>
</Container>
</SafeAreaView>
);
}
