react-native-elements#Icon JavaScript Examples
The following examples show how to use
react-native-elements#Icon.
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: MyHeader.js From barter-app-stage-10 with MIT License | 6 votes |
|
render(){
return(
<Header
leftComponent={<Icon name='bars' type='font-awesome' color='#696969' onPress={() => this.props.navigation.toggleDrawer()}/>}
centerComponent={{ text: this.props.title, style: { color: '#90A5A9', fontSize:20,fontWeight:"bold", } }}
rightComponent={<this.BellIconWithBadge {...this.props}/>}
backgroundColor = "#eaf8fe"
/>
)
}
Example #2
| Source File: SimpleProgressBar.js From react-native-audio-video-tools with MIT License | 6 votes |
|
SimpleProgressBar = ({completed, onCancelPress}) => {
return (
<View style={styles.container}>
<View style={styles.progressBarContainer}>
<View style={styles.barWrapper}>
<View style={[styles.innerBar, {width: `${completed}%`}]}/>
<View>
<Text style={styles.percentage}>
{completed}%
</Text>
</View>
</View>
</View>
<Button
icon={
<Icon
name="cancel"
type="material"
size={15}
color={'white'}
style={{marginLeft: 5}}
/>
}
buttonStyle={{ backgroundColor: 'red' }}
iconRight
title="Cancel"
onPress={() => onCancelPress()}
/>
</View>
);
}
Example #3
| Source File: AppDrawerNavigator.js From barter-app-stage-12 with MIT License | 6 votes |
|
AppDrawerNavigator = createDrawerNavigator({
Home : {
screen : AppTabNavigator,
navigationOptions:{
drawerIcon : <Icon name="home" type ="fontawesome5" />
}
},
MyBarters:{
screen : MyBartersScreen,
},
Notifications :{
screen : NotificationScreen,
navigationOptions:{
drawerIcon : <Icon name="bell" type ="font-awesome" />,
drawerLabel : "Notifications"
}
},
Setting : {
screen : SettingScreen,
navigationOptions:{
drawerIcon : <Icon name="gift" type ="font-awesome" />,
drawerLabel : "My Received Books"
}
}
},
{
contentComponent:CustomSidebarMenu
},
{
initialRouteName : 'Home'
})
Example #4
| Source File: AdviceCard.js From react-native-covid19 with MIT License | 6 votes |
|
export default function AdviceCard(props) {
const activeTheme = useContext(theme).globalTheme;
const styles = {
container: {
flexDirection: 'row',
alignItems: 'center',
width: '100%',
marginVertical: 5,
borderRadius: 5,
elevation: 1,
padding: 20
},
regionText: {
color: activeTheme.textColor.normal,
marginBottom: 5,
fontSize: 16
},
caseTypeText: {
fontWeight: 'bold',
marginBottom: 8
}
}
return (
<TouchableOpacity activeOpacity={0.8} onPress={props.onPress}>
<View style={[styles.container, { backgroundColor: activeTheme.primaryColor }]}>
{/* icon change based on case type */}
{props.icon}
<View style={{ flex: 5, padding: 10 }}>
<Text style={styles.regionText}>{props.title}</Text>
{/* //text color changes based on case type */}
<Text style={{ color: activeTheme.textColor.secondary }}>{props.description}</Text>
</View>
<Icon name="ios-arrow-forward" type="ionicon" size={30} />
</View>
</TouchableOpacity>
)
}
Example #5
| Source File: BackBtn.js From react-native-covid19 with MIT License | 6 votes |
|
export default function BackBtn(props) {
const activeTheme = useContext(theme).globalTheme;
return (
<Button
icon={
<Icon
name="arrow-back"
type="material"
color={activeTheme.textColor.secondary}
/>
}
containerStyle={{ position: 'absolute', top: 20, left: 20, zIndex: 100 }}
buttonStyle={{ backgroundColor: activeTheme.darkTheme ? '#00000070' : '#ffffff70', padding: 12 }}
onPress={props.onPress}
/>
)
}
Example #6
| Source File: CaseStateText.js From react-native-covid19 with MIT License | 6 votes |
|
export default function CaseStateText(props) {
const activeTheme = useContext(theme).globalTheme;
let color;
switch (props.state) {
case "Confirmed":
color = activeTheme.textColor.confirmed;
break;
case "Recovered":
color = activeTheme.textColor.recovered;
break;
}
let iconName = props.value < props.delta ? 'trending-down' : 'trending-up'
return (
<View style={styles.container}>
<Icon
// trending-up or trending-down based on the delta value
name={iconName}
type="material"
color={activeTheme.textColor.alternate}
/>
<Text style={[styles.text, { color }]}>{`${props.state}: ${props.value}`}</Text>
</View>
)
}
Example #7
| Source File: MyHeader.js From barter-app-stage-12 with MIT License | 6 votes |
|
render(){
return(
<Header
leftComponent={<Icon name='bars' type='font-awesome' color='#ffffff' onPress={() => this.props.navigation.toggleDrawer()}/>}
centerComponent={{ text: this.props.title, style: { color: '#ffffff', fontSize:20,fontWeight:"bold", } }}
rightComponent={<this.BellIconWithBadge {...this.props}/>}
backgroundColor = "#32867d"
/>
)
}
Example #8
| Source File: Symptoms.js From react-native-covid19 with MIT License | 6 votes |
|
export default function Symptopms(props) {
const styles = {
warningContainer: {
flexDirection: 'row',
padding: 20,
backgroundColor: '#FFD70020',
margin: 10,
borderRadius: 10
}
}
return (
<Container>
<BackBtn onPress={() => props.navigation.goBack()} />
<View style={{ alignItems: 'center', paddingTop: 50, paddingBottom: 100 }}>
<SymptomCard source={require('../res/symptoms.png')} symptom="Fever" />
<SymptomCard source={require('../res/symptoms-1.png')} symptom="Cough" />
<SymptomCard source={require('../res/symptoms-2.png')} symptom="Shortness of breath" />
<View style={styles.warningContainer}>
<Icon
name="warning"
type="material"
color="gold"
containerStyle={{ marginRight: 20 }}
/>
<Text style={{ flex: 4, color: 'gold' }}>Seek medical advice if you develop
symptoms, and have been in close
contact with a person known to
have COVID-19 or if you live in or
have recently been in an area with
ongoing spread of COVID-19.</Text>
</View>
</View>
</Container>
)
}
Example #9
| Source File: CasesCard.js From react-native-covid19 with MIT License | 5 votes |
|
export default function CasesCard(props) {
const activeTheme = useContext(theme).globalTheme;
const styles = {
container: {
flexDirection: 'row',
alignItems: 'center',
width: '100%',
marginVertical: 5,
borderRadius: 5,
elevation: 1
},
regionText: {
color: activeTheme.textColor.normal,
marginBottom: 5,
fontSize: 16
},
caseTypeText: {
fontWeight: 'bold',
marginBottom: 8
}
}
let provinceState = props.case.provinceState ? props.case.provinceState : "";
let countryRegion = props.case.countryRegion ? props.case.countryRegion : "";
let iconName;
let color;
switch (props.type) {
case 'Confirmed':
iconName = 'meho';
color = activeTheme.textColor.confirmed
break;
case 'Recovered':
iconName = 'smile-circle';
color = activeTheme.textColor.recovered;
break;
case 'Deaths':
iconName = 'frown';
color = activeTheme.textColor.deaths;
break;
}
return (
<TouchableOpacity activeOpacity={0.8} onPress={props.onPress}>
<View style={[styles.container, { backgroundColor: activeTheme.primaryColor, }]}>
{/* icon change based on case type */}
<Icon
containerStyle={{ flex: 1 }}
name={iconName}
type="antdesign"
color={color}
/>
<View style={{ flex: 5, padding: 10 }}>
<Text style={styles.regionText}>{`${provinceState} ${countryRegion}`}</Text>
{/* //text color changes based on case type */}
<Text style={[styles.caseTypeText, { color }]}>{`${props.type} ${props.case[props.type.toLowerCase()]}`}</Text>
<Text style={{ color: activeTheme.textColor.secondary }}>{`Last updated ${(new Date(props.case.lastUpdate)).toDateString()}`}</Text>
</View>
</View>
</TouchableOpacity>
)
}
Example #10
| Source File: PriceRangeScreen.js From spree-react-native with MIT License | 5 votes |
|
function PriceRange({ navigation, dispatch, priceRange }) {
const [priceRangeFrom, setPriceRangeFrom] = React.useState(20)
const [priceRangeTo, setPriceRangeTo] = React.useState(100)
React.useEffect(() => {
setPriceRangeFrom(priceRange.minimum)
setPriceRangeTo(priceRange.maximum)
}, [])
return (
<View style={[globalStyles.container,{ flex: 1, alignItems: 'stretch', justifyContent: 'center' }]}>
<Slider
value={priceRangeFrom}
onValueChange={priceRangeFrom => setPriceRangeFrom(priceRangeFrom)}
minimumValue={20}
maximumValue={40}
step={1}
onSlidingComplete={text => dispatch(setMinimumPriceRange(text))}
trackStyle={{ height: 10, backgroundColor: 'transparent' }}
thumbStyle={{ height: 20, width: 20, backgroundColor: 'transparent' }}
thumbProps={{
children: (
<Icon
name="dollar"
type="font-awesome"
size={20}
reverse
containerStyle={{ bottom: 20, right: 20 }}
color="gold"
/>
),
}}
/>
<Text style={{alignSelf: 'center', marginBottom: 10}}>From: {priceRangeFrom}</Text>
<Slider
value={priceRangeTo}
onValueChange={priceRangeTo => setPriceRangeTo(priceRangeTo)}
minimumValue={40}
maximumValue={100}
step={1}
onSlidingComplete={text => dispatch(setMaximumPriceRange(text))}
trackStyle={{ height: 10, backgroundColor: 'transparent' }}
thumbStyle={{ height: 20, width: 20, backgroundColor: 'transparent' }}
thumbProps={{
children: (
<Icon
name="dollar"
type="font-awesome"
size={20}
reverse
containerStyle={{ bottom: 20, right: 20 }}
color="gold"
/>
),
}}
/>
<Text style={{alignSelf: 'center'}}>To: {priceRangeTo}</Text>
</View>
);
}
Example #11
| Source File: index.jsx From polaris with Apache License 2.0 | 5 votes |
|
Camera = () => {
const { t } = useTranslation()
const [hasPermission, setHasPermission] = React.useState(null)
const [photo, setPhoto] = React.useState(null)
const camera = React.createRef()
const takePicture = async () => {
try {
const photo = await camera.current.takePictureAsync()
setPhoto(photo)
} catch (err) {
console.log('Error while taking picture', err)
}
}
const redirectImage = async () => {
const isAvailable = await Sharing.isAvailableAsync()
if (!isAvailable) {
alert(t('camera:sharingNotAvailable'))
}
await Sharing.shareAsync(photo.uri)
setPhoto(null)
}
React.useEffect(() => {
;(async () => {
const { status } = await ExpoCamera.requestPermissionsAsync()
setHasPermission(status === 'granted')
})()
}, [])
if (hasPermission === null) {
return <View />
}
if (hasPermission === false) {
return (
<Container>
<Text>{t('camera:permissionDenied')}</Text>
</Container>
)
}
return !photo ? (
<Wrapper>
<ExpoCamera style={{ flex: 1 }} ref={camera}>
<TakePictureButton onPress={takePicture}>
<Icon name="camera-alt" color="#fff" />
</TakePictureButton>
</ExpoCamera>
</Wrapper>
) : (
<Wrapper>
<Display>
<ImageContainer source={{ uri: photo.uri }} />
<PhotoButtons>
<TouchableOpacity onPress={() => setPhoto(null)}>
<PhotoActionButton>{t('camera:photoRetake')}</PhotoActionButton>
</TouchableOpacity>
<TouchableOpacity onPress={redirectImage}>
<PhotoActionButton>{t('camera:photoForward')}</PhotoActionButton>
</TouchableOpacity>
</PhotoButtons>
</Display>
</Wrapper>
)
}
Example #12
| Source File: ReceiverDetailsScreen.js From barter-app-stage-10 with MIT License | 5 votes |
|
render(){
return(
<View style={styles.container}>
<View style={{flex:0.1}}>
<Header
leftComponent ={<Icon name='arrow-left' type='feather' color='#696969' onPress={() => this.props.navigation.goBack()}/>}
centerComponent={{ text:"Exchange Items", style: { color: '#90A5A9', fontSize:20,fontWeight:"bold", } }}
backgroundColor = "#eaf8fe"
/>
</View>
<View style={{flex:0.3}}>
<Card
title={"Item Information"}
titleStyle= {{fontSize : 20}}
>
<Card >
<Text style={{fontWeight:'bold'}}>Name : {this.state.itemName}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Reason : {this.state.description}</Text>
</Card>
</Card>
</View>
<View style={{flex:0.3}}>
<Card
title={"receiver Information"}
titleStyle= {{fontSize : 20}}
>
<Card>
<Text style={{fontWeight:'bold'}}>Name: {this.state.receiverName}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Contact: {this.state.receiverContact}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Address: {this.state.receiverAddress}</Text>
</Card>
</Card>
</View>
<View style={styles.buttonContainer}>
{
this.state.receiverId !== this.state.userId
?(
<TouchableOpacity
style={styles.button}
onPress={()=>{
this.updateBarterStatus()
this.addNotification()
this.props.navigation.navigate('MyBarters')
}}>
<Text>I want to Exchange</Text>
</TouchableOpacity>
)
: null
}
</View>
</View>
)
}
Example #13
| Source File: CustomSidebarMenu.js From barter-app-stage-12 with MIT License | 5 votes |
|
render() {
return (
<View style={{ flex: 1 }}>
<View
style={{
flex: 0.3,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#32867d",
}}
>
<Avatar
rounded
source={{
uri: this.state.image,
}}
size={"xlarge"}
onPress={() => this.selectPicture()}
showEditButton
/>
<Text
style={{
fontWeight: "300",
fontSize: RFValue(20),
color: "#fff",
padding: RFValue(10),
}}
>
{this.state.name}
</Text>
</View>
<View style={{ flex: 0.6 }}>
<DrawerItems {...this.props} />
</View>
<View style={{ flex: 0.1 }}>
<TouchableOpacity
style={{
flexDirection: "row",
width: "100%",
height: "100%",
}}
onPress={() => {
this.props.navigation.navigate("WelcomeScreen");
firebase.auth().signOut();
}}
>
<Icon
name="logout"
type="antdesign"
size={RFValue(20)}
iconStyle={{ paddingLeft: RFValue(10) }}
/>
<Text
style={{
fontSize: RFValue(15),
fontWeight: "bold",
marginLeft: RFValue(30),
}}
>
Log Out
</Text>
</TouchableOpacity>
</View>
</View>
);
}
Example #14
| Source File: ReceiverDetailsScreen.js From barter-app-stage-12 with MIT License | 5 votes |
|
render(){
return(
<View style={styles.container}>
<View style={{flex:0.1}}>
<Header
leftComponent ={<Icon name='arrow-left' type='feather' color='#ffff' onPress={() => this.props.navigation.goBack()}/>}
centerComponent={{ text:"Exchange Items", style: { color:'#ffff', fontSize:20,fontWeight:"bold", } }}
backgroundColor = "#32867d"
/>
</View>
<View style={{flex:0.3,marginTop:RFValue(20)}}>
<Card
title={"Item Information"}
titleStyle= {{fontSize : 20}}
>
<Text style={{fontWeight:'bold'}}>Name : {this.state.itemName}</Text>
<Text style={{fontWeight:'bold'}}>Reason : {this.state.description}</Text>
</Card>
</View>
<View style={{flex:0.3}}>
<Card
title={"Receiver Information"}
titleStyle= {{fontSize : 20}}
>
<Card>
<Text style={{fontWeight:'bold'}}>Name: {this.state.receiverName}</Text>
<Text style={{fontWeight:'bold'}}>Contact: {this.state.receiverContact}</Text>
<Text style={{fontWeight:'bold'}}>Address: {this.state.receiverAddress}</Text>
</Card>
</Card>
</View>
<View style={styles.buttonContainer}>
{
this.state.receiverId !== this.state.userId
?(
<TouchableOpacity
style={styles.button}
onPress={()=>{
this.updateBarterStatus()
this.addNotification()
this.props.navigation.navigate('MyBarters')
}}>
<Text style={{color:'#ffff'}}>I want to Exchange</Text>
</TouchableOpacity>
)
: null
}
</View>
</View>
)
}
Example #15
| Source File: Advice.js From react-native-covid19 with MIT License | 5 votes |
|
export default function Advice(props) {
const activeTheme = useContext(theme).globalTheme;
return (
<Container>
<View style={{ padding: 20, paddingBottom: 100 }}>
<Text style={{ fontSize: 30, color: activeTheme.textColor.alternate, marginBottom: 30 }}>Information Center</Text>
<AdviceCard
onPress={() => props.navigation.navigate("HowItSpreads")}
icon={
<Icon name="bug" type="entypo" color="purple" />
}
title="How it spreads"
description="Learn how Covid-19 spreads"
/>
<AdviceCard
onPress={() => props.navigation.navigate("Symptoms")}
icon={
<Icon name="air" type="entypo" color="orange" />
}
title="Symptoms"
description="Symptoms of Covid-19"
/>
<AdviceCard
onPress={() => props.navigation.navigate("Prevention")}
icon={
<Icon name="first-aid" type="foundation" color="#FF8080" />
}
title="Prevention and treatment"
description="Steps taken to prevent Covid-19"
/>
<AdviceCard
onPress={() => props.navigation.navigate("WhatToDo")}
icon={
<Icon name="question" type="foundation" color="gold" />
}
title="What to do"
description="What to do if you get the virus"
/>
</View>
</Container>
)
}
Example #16
| Source File: DailyCard.js From react-native-covid19 with MIT License | 5 votes |
|
export default function DailyCard(props) {
const activeTheme = useContext(theme).globalTheme;
const styles = {
container: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 10,
paddingVertical: 5,
backgroundColor: activeTheme.primaryColor
},
descriptionText: {
color: activeTheme.textColor.secondary,
fontSize: 12
}
}
return (
<View style={styles.container}>
<View style={{ flex: 1 }}>
<Icon
containerStyle={{ marginBottom: 0, padding: 0, margin: 0 }}
name="timelapse"
type="material"
color={activeTheme.textColor.alternate}
/>
<View style={{ backgroundColor: 'transparent', width: '50%', height: 50, borderRightWidth: 0.8, borderRightColor: activeTheme.textColor.alternate }}>
</View>
</View>
<View style={{ flex: 6 }}>
<Text style={{ color: activeTheme.textColor.normal }}>{(new Date(props.case.reportDate)).toDateString()}</Text>
<View style={{ flexDirection: 'row' }}>
<CaseStateText
state="Confirmed"
value={props.case.totalConfirmed ? props.case.totalConfirmed : 0}
delta={props.case.deltaConfirmed ? props.case.deltaConfirmed : 0}
/>
<CaseStateText
state="Recovered"
value={props.case.totalRecovered ? props.case.totalRecovered : 0}
delta={props.case.deltaRecovered ? props.case.deltaRecovered : 0}
/>
</View>
<Text style={styles.descriptionText}>
{`Total ${props.case.mainlandChina ? props.case.mainlandChina : 0} cases in China and ${props.case.otherLocations ? props.case.otherLocations : 0} in other locations`}</Text>
</View>
</View >
)
}
Example #17
| Source File: ReceiverDetailsScreen.js From barter-app-stage-6 with MIT License | 5 votes |
|
render(){
return(
<View style={styles.container}>
<View style={{flex:0.1}}>
<Header
leftComponent ={<Icon name='arrow-left' type='feather' color='#696969' onPress={() => this.props.navigation.goBack()}/>}
centerComponent={{ text:"Exchange Items", style: { color: '#90A5A9', fontSize:20,fontWeight:"bold", } }}
backgroundColor = "#eaf8fe"
/>
</View>
<View style={{flex:0.3}}>
<Card
title={"Item Information"}
titleStyle= {{fontSize : 20}}
>
<Card >
<Text style={{fontWeight:'bold'}}>Name : {this.state.itemName}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Reason : {this.state.description}</Text>
</Card>
</Card>
</View>
<View style={{flex:0.3}}>
<Card
title={"Reciever Information"}
titleStyle= {{fontSize : 20}}
>
<Card>
<Text style={{fontWeight:'bold'}}>Name: {this.state.recieverName}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Contact: {this.state.recieverContact}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Address: {this.state.recieverAddress}</Text>
</Card>
</Card>
</View>
<View style={styles.buttonContainer}>
{
this.state.recieverId !== this.state.userId
?(
<TouchableOpacity
style={styles.button}
onPress={()=>{
this.updateBarterStatus()
this.props.navigation.navigate('MyBarters')
}}>
<Text>I want to Exchange</Text>
</TouchableOpacity>
)
: null
}
</View>
</View>
)
}
Example #18
| Source File: RecieverDetailsScreen.js From book-santa-stage-10 with MIT License | 5 votes |
|
render(){
return(
<View style={styles.container}>
<View style={{flex:0.1}}>
<Header
leftComponent ={<Icon name='arrow-left' type='feather' color='#696969' onPress={() => this.props.navigation.goBack()}/>}
centerComponent={{ text:"Donate Books", style: { color: '#90A5A9', fontSize:20,fontWeight:"bold", } }}
backgroundColor = "#eaf8fe"
/>
</View>
<View style={{flex:0.3}}>
<Card
title={"Book Information"}
titleStyle= {{fontSize : 20}}
>
<Card >
<Text style={{fontWeight:'bold'}}>Name : {this.state.bookName}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Reason : {this.state.reason_for_requesting}</Text>
</Card>
</Card>
</View>
<View style={{flex:0.3}}>
<Card
title={"Reciever Information"}
titleStyle= {{fontSize : 20}}
>
<Card>
<Text style={{fontWeight:'bold'}}>Name: {this.state.recieverName}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Contact: {this.state.recieverContact}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Address: {this.state.recieverAddress}</Text>
</Card>
</Card>
</View>
<View style={styles.buttonContainer}>
{
this.state.recieverId !== this.state.userId
?(
<TouchableOpacity
style={styles.button}
onPress={()=>{
this.updateBookStatus()
this.addNotification()
this.props.navigation.navigate('MyDonations')
}}>
<Text>I want to Donate</Text>
</TouchableOpacity>
)
: null
}
</View>
</View>
)
}
Example #19
| Source File: DrawerMenuPanel.js From react-native-booking-app with MIT License | 5 votes |
|
render() {
let {closeDrawer} = this.props;
return (
<ScrollView style={styles.container}>
<View style={styles.logoContainer}>
<Image source={require('../../assets/images/logo.png')} style={styles.logo}/>
</View>
<View style={styles.nameContainer}>
<Text style={styles.nameText}>{this.state.userName}</Text>
</View>
<View style={styles.emailContainer}>
<Text style={styles.emailText}>{this.state.userEmail}</Text>
</View>
<View style={styles.menuContainer}>
<View style={styles.menuItemContainer}>
<TouchableOpacity style={styles.menuItem} onPress={()=>closeDrawer(HomeScreen.DrawerMenuItem.Profile)}>
<Icon name='person' color='#66bd32' />
<Text style={styles.menuText}>Profile</Text>
</TouchableOpacity>
</View>
<View style={styles.menuItemContainer}>
<TouchableOpacity style={styles.menuItem} onPress={()=>closeDrawer(HomeScreen.DrawerMenuItem.Booking)}>
<Icon name='book' color='#66bd32' />
<Text style={styles.menuText}>Booking</Text>
</TouchableOpacity>
</View>
<View style={styles.menuItemContainer}>
<TouchableOpacity style={styles.menuItem} onPress={()=>closeDrawer(HomeScreen.DrawerMenuItem.About)}>
<Icon name='info-circle' type='font-awesome' color='#66bd32' />
<Text style={styles.menuText}>About MedSpa</Text>
</TouchableOpacity>
</View>
<View style={styles.menuItemContainer}>
<TouchableOpacity style={styles.menuItem} onPress={()=>closeDrawer(HomeScreen.DrawerMenuItem.Locations)}>
<Icon name='map-marker' type='font-awesome' size={30} color='#66bd32' />
<Text style={styles.menuText}>Locations</Text>
</TouchableOpacity>
</View>
<View style={styles.menuItemContainer}>
<TouchableOpacity style={styles.menuItem} onPress={()=>closeDrawer(HomeScreen.DrawerMenuItem.ContactUs)}>
<Icon name='paper-plane' type='font-awesome' size={21} color='#66bd32' />
<Text style={styles.menuText}>Contact Us</Text>
</TouchableOpacity>
</View>
<View style={styles.menuItemContainer}>
<TouchableOpacity style={styles.menuItem} onPress={()=>closeDrawer(HomeScreen.DrawerMenuItem.Reports)}>
<Icon name='print' type='font-awesome' color='#66bd32' />
<Text style={styles.menuText}>Reports</Text>
</TouchableOpacity>
</View>
<View style={styles.menuItemContainer}>
<TouchableOpacity style={styles.menuItem} onPress={()=>closeDrawer(HomeScreen.DrawerMenuItem.Logout)}>
<Icon name='sign-out' type='font-awesome' color='#66bd32' />
<Text style={styles.menuText}>Logout</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
)
}
Example #20
| Source File: Modals.js From react-native-audio-video-tools with MIT License | 5 votes |
|
CustomModal = ({title, content, isVisible, onCloseClick, leftText, rightText, onLeftClick, onRightClick}) => {
return (
<Modal isVisible={isVisible} overlayStyle={styles.container}>
<View style={styles.wrapper}>
<View style={styles.modalHeader}>
<Text style={styles.modalTitle}>{title}</Text>
<View
style={{
position: 'absolute',
right: 5,
}}
>
<Icon
name={'ios-close-circle-outline'}
type="ionicon"
color={COLORS.White}
onPress={onCloseClick}
/>
</View>
</View>
<Divider />
<View style={styles.modalBody}>
{content}
</View>
<View style={styles.modalFooter}>
{onLeftClick && onRightClick ? (
<>
<Button
type="outline"
title={leftText}
onPress={onLeftClick}
buttonStyle={{paddingHorizontal: 20, paddingVertical: 5}}
/>
<Button
title={rightText}
onPress={onRightClick}
buttonStyle={{paddingHorizontal: 20, paddingVertical: 5, marginHorizontal: 20, marginLeft: 40}}
/>
</>
) : (
<Button
title={leftText}
onPress={onLeftClick}
buttonStyle={{paddingHorizontal: 20, paddingVertical: 5, marginRight: 20}}
/>
)}
</View>
</View>
</Modal>
);
}
Example #21
| Source File: AppDrawerNavigator.js From book-santa-stage-13 with MIT License | 5 votes |
|
AppDrawerNavigator = createDrawerNavigator({
Home : {
screen : AppTabNavigator,
navigationOptions:{
drawerIcon : <Icon name="home" type ="fontawesome5" />
}
},
MyDonations : {
screen : MyDonationScreen,
navigationOptions:{
drawerIcon : <Icon name="gift" type ="font-awesome" />,
drawerLabel : "My Donations"
}
},
Notification : {
screen : NotificationScreen,
navigationOptions:{
drawerIcon : <Icon name="bell" type ="font-awesome" />,
drawerLabel : "Notifications"
}
},
MyReceivedBooks :{
screen: MyReceivedBooksScreen,
navigationOptions:{
drawerIcon : <Icon name="gift" type ="font-awesome" />,
drawerLabel : "My Received Books"
}
},
Setting : {
screen : SettingScreen,
navigationOptions:{
drawerIcon : <Icon name="settings" type ="fontawesome5" />,
drawerLabel : "Settings"
}
}
},
{
contentComponent:CustomSideBarMenu
},
{
initialRouteName : 'Home'
})
Example #22
| Source File: Boards.js From hugin-mobile with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const submitMessage = async (text) => {
Keyboard.dismiss();
let updated_messages = await getBoardsMessages(this.state.board);
if (!updated_messages) {
updated_messages = [];
}
let temp_timestamp = parseInt(Date.now() / 1000);
updated_messages.unshift({
board: this.state.board,
address: Globals.wallet.getPrimaryAddress(),
message: checkText(text),
timestamp: temp_timestamp,
hash: temp_timestamp.toString(),
read: 1,
nickname: Globals.preferences.nickname
});
this.setState({
messages: updated_messages,
messageHasLength: false,
message: ''
});
let success = await sendBoardsMessage(checkText(text), this.state.board, this.state.paymentID);
// await removeMessage(temp_timestamp);
if (success.success) {
this.input.clear();
this.setState({messageHasLength: this.state.message.length > 0});
// this.state.input.current.clear();
} else {
updated_messages = await getBoardsMessages(this.state.board);
this.setState({
messages: updated_messages,
messageHasLength: true
})
}
}
const getBoard = async (board) => {
const board_messages = await getBoardsMessages(board);
this.setState({
board: board,
messages: board_messages
});
}
const { t } = this.props;
const messages = this.state.messages;
const board = this.state.board;
const noMessagesComponent =
<View style={{
width: '100%',
}}>
<Text style={{
color: this.props.screenProps.theme.primaryColour,
marginTop: 10,
fontSize: 16
}}>
{t('emptyAddressBook')}
</Text>
</View>;
const newMessageIndicator =
<Icon
reverse
name='ios-american-football'
type='ionicon'
color='#006BA7'
size={0}
/>;
const items =
<ScrollView
showsVerticalScrollIndicator={false}
style={{
width: '100%',
height: '70%',
marginBottom: 20,
backgroundColor: this.props.screenProps.theme.backgroundColour,
borderWidth: 0,
borderColor: 'transparent'
}}>
<FlatList
extraData={this.state.index}
ItemSeparatorComponent={null}
data={messages}
keyExtractor={item => item.hash}
renderItem={({item}) => (
<ListItem
title={item.nickname ? item.nickname + " in " + item.board : 'Anonymous in ' + item.board}
subtitle={<Text><Text>{item.message + "\n"}</Text><Moment locale={Globals.language} style={{fontFamily: "Montserrat-Regular", fontSize: 10, textAlignVertical: 'bottom' }} element={Text} unix fromNow>{item.timestamp}</Moment></Text>}
subtitleStyle={{
fontFamily: "Montserrat-Regular"
}}
chevron={item.read == '1' ? false : newMessageIndicator }
leftIcon={
<Image
style={{width: 50, height: 50}}
source={{uri: get_avatar(item.address)}}
/>
// <View style={{
// width: 50,
// height: 50,
// alignItems: 'center',
// justifyContent: 'center',
// backgroundColor: this.props.screenProps.theme.iconColour,
// borderRadius: 45
// }}>
// <Text style={[Styles.centeredText, {
// fontSize: 30,
// color: this.props.screenProps.theme.primaryColour,
// }]}>
// {item.nickname[0].toUpperCase()}
// </Text>
//
// </View>
}
titleStyle={{
color: this.props.screenProps.theme.primaryColour,
fontFamily: 'Montserrat-SemiBold'
}}showsVerticalScrollIndicator={false}
subtitleStyle={{
color: this.props.screenProps.theme.slightlyMoreVisibleColour,
fontFamily: 'Montserrat-Regular'
}}
onPress={async () => {
getBoard(item.board);
// let messages = await getBoardsMessages(board);
//
// this.setState({
// board: item.board,
// messages: messages
// });
// this.props.navigation.navigate(
// 'ChatScreen', {
// payee: item,
// }
// );
// await markBoardMessageAsRead(item.address);
// Globals.payees = await loadPayeeDataFromDatabase();
// this.setState({
// payees: Globals.payees
// });
}}
/>
)}
/>
</ScrollView>;
const messageComponent =
<ScrollView
showsVerticalScrollIndicator={false}
style={{
width: '100%',
height: '70%',
marginBottom: 20,
backgroundColor: this.props.screenProps.theme.backgroundColour,
borderWidth: 0,
borderColor: 'transparent'
}}>
{items}
</ScrollView>;
const messageInput =
<View
style={{
width: this.state.messageHasLength ? '80%' : '100%',
backgroundColor: 'rgba(0,0,0,0.2)',
borderWidth: 0,
borderColor: 'transparent',
borderRadius: 15,
height: 50
}}
>
<TextInput
multiline={true}
textAlignVertical={'top'}
ref={input => { this.input = input }}
style={{
color: this.props.screenProps.theme.primaryColour,
fontFamily: 'Montserrat-Regular',
fontSize: 15,
width: '100%',
height: '100%',
padding: 15,
}}
maxLength={Config.integratedAddressLength}
placeholder={t('typeMessageHere')}
placeholderTextColor={'#ffffff'}
onSubmitEditing={async (e) => {
e.preventDefault();
// return;
// submitMessage(this.state.message);
// this.setState({message: '', messageHasLength: false});
}}
onChangeText={(text) => {
if (this.props.onChange) {
this.props.onChange(text);
}
this.state.message = text;
this.setState({messageHasLength: this.state.message.length > 0});
}}
errorMessage={this.props.error}
/>
</View>;
return(
<View style={{
backgroundColor: this.props.screenProps.theme.backgroundColour,
flex: 1,
alignItems: 'flex-start',
justifyContent: 'flex-start',
}}>
<View style={{
flex: 1,
marginLeft: 30,
marginTop: 15,
width: '85%'
}}>
<TouchableWithoutFeedback
onPress={() => {
getBoard('Home');
}}
>
<View style={{
flexDirection: 'row',
justifyContent: 'space-between',
height: 40,
}}>
{this.state.board != 'Home' &&
<Text style={{
marginLeft: 15,
color: this.props.screenProps.theme.primaryColour,
fontSize: 24,
fontFamily: "Montserrat-SemiBold"
}}>
Go back
</Text>
}
{this.state.board == 'Home' &&
<Text style={{
marginLeft: 15,
color: this.props.screenProps.theme.primaryColour,
fontSize: 24,
fontFamily: "Montserrat-SemiBold"
}}>
{t('boardsTitle')}
</Text>
}
<Text style={{
marginLeft: 15,
color: this.props.screenProps.theme.primaryColour,
fontSize: 16,
fontFamily: "Montserrat-SemiBold"
}}>
{board}
</Text>
</View>
</TouchableWithoutFeedback>
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
style={{
marginHorizontal: 10,
marginBottom: 5,
flexDirection: 'row'
}}>
{this.state.board && messageInput}
{this.state.messageHasLength &&
<Button
title={t('send')}
onPress={() => {
submitMessage(this.state.message);
this.setState({message: '', messageHasLength: false});
}}
titleStyle={{
}}
type="clear"
/>
}
</KeyboardAvoidingView>
<View style={{
backgroundColor: this.props.screenProps.theme.backgroundColour,
flex: 1,
marginRight: 15,
alignItems: 'flex-start',
justifyContent: 'flex-start',
}}>
{this.state.messages.length > 0 ? messageComponent : noMessagesComponent}
</View>
</View>
</View>
);
}
Example #23
| Source File: RecieverDetailsScreen.js From book-santa-stage-13 with MIT License | 4 votes |
|
render() {
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 0.1 }}>
<Header
leftComponent={
<Icon
name="arrow-left"
type="feather"
color="#ffffff"
onPress={() => this.props.navigation.goBack()}
/>
}
centerComponent={{
text: "Donate Books",
style: {
color: "#ffffff",
fontSize: RFValue(20),
fontWeight: "bold",
},
}}
backgroundColor="#32867d"
/>
</View>
<View style={{ flex: 0.9 }}>
<View
style={{
flex: 0.3,
flexDirection: "row",
paddingTop: RFValue(30),
paddingLeft: RFValue(10),
}}
>
<View style={{ flex: 0.4,}}>
<Image
source={{ uri: this.state.bookImage }}
style={{
width: "100%",
height: "100%",
resizeMode: "contain",
}}
/>
</View>
<View
style={{
flex: 0.6,
alignItems: "center",
justifyContent: "center",
}}
>
<Text
style={{
fontWeight: "500",
fontSize: RFValue(25),
textAlign: "center",
}}
>
{this.state.bookName}
</Text>
<Text
style={{
fontWeight: "400",
fontSize: RFValue(15),
textAlign: "center",
marginTop: RFValue(15),
}}
>
{this.state.reason_for_requesting}
</Text>
</View>
</View>
<View
style={{
flex: 0.7,
padding: RFValue(20),
}}
>
<View style={{ flex: 0.7 ,justifyContent:'center',alignItems:'center',marginTop:RFValue(50),borderWidth:1,borderColor:'#deeedd',padding:RFValue(10)}}>
<Text
style={{
fontWeight: "500",
fontSize: RFValue(30),
}}
>
Reciever Information
</Text>
<Text
style={{
fontWeight: "400",
fontSize: RFValue(20),
marginTop: RFValue(30),
}}
>
Name : {this.state.recieverName}
</Text>
<Text
style={{
fontWeight: "400",
fontSize: RFValue(20),
marginTop: RFValue(30),
}}
>
Contact: {this.state.recieverContact}
</Text>
<Text
style={{
fontWeight: "400",
fontSize: RFValue(20),
marginTop: RFValue(30),
}}
>
Address: {this.state.recieverAddress}
</Text>
</View>
<View
style={{
flex: 0.3,
justifyContent: "center",
alignItems: "center",
}}
>
{this.state.recieverId !== this.state.userId ? (
<TouchableOpacity
style={styles.button}
onPress={() => {
this.updateBookStatus();
this.addNotification();
this.props.navigation.navigate("MyDonations");
}}
>
<Text>I want to Donate</Text>
</TouchableOpacity>
) : null}
</View>
</View>
</View>
</View>
);
}
Example #24
| Source File: slider.playground.jsx From playground with MIT License | 4 votes |
|
SliderPlayground = () => {
const params = useView({
componentName: "Slider",
props: {
animateTransitions: {
value: true,
type: PropTypes.Boolean,
},
animationConfig: {
valie: `{}`,
type: PropTypes.Object,
},
animationType: {
value: "timing",
options: {
timing: "timing",
spring: "spring",
},
type: PropTypes.Enum,
description: "Defines the Animation type.",
},
debugTouchArea: {
type: PropTypes.Boolean,
value: false,
description:
"Set this to true to visually see the thumb touch rect in green.",
},
disabled: {
type: PropTypes.Boolean,
value: false,
description: "Disables the slider",
},
maximumTrackTintColor: {
type: PropTypes.String,
value: "#ccc",
},
maximumValue: {
value: 100,
type: PropTypes.Number,
},
minimumTrackTintColor: {
type: PropTypes.String,
value: "#222",
},
minimumValue: {
value: 0,
type: PropTypes.Number,
},
allowTouchTrack: {
type: PropTypes.Boolean,
value: false,
description:
"If true, thumb will respond and jump to any touch along the track.",
},
onSlidingComplete: {
type: PropTypes.Function,
value: `() => console.log("onSlidingComplete()")`,
},
onSlidingStart: {
type: PropTypes.Function,
value: `() => console.log("onSlidingStart()")`,
},
onValueChange: {
type: PropTypes.Function,
value: `(value) => console.log("onValueChange()",value)`,
},
orientation: {
value: "horizontal",
options: {
horizontal: "horizontal",
vertical: "vertical",
},
type: PropTypes.Enum,
description: "Slider's Orientation",
},
step: {
value: 1,
type: PropTypes.Number,
},
style: {
value: `{width:"80%",height:200}`,
type: PropTypes.Object,
},
thumbStyle: {
value: `{ height: 20, width: 20 }`,
type: PropTypes.Object,
},
thumbProps: {
value: `{
children: (
<Icon
name="heartbeat"
type="font-awesome"
size={20}
reverse
containerStyle={{ bottom: 20, right: 20 }}
color="#f50"
/>
),
}`,
type: PropTypes.Object,
},
thumbTintColor: {
type: PropTypes.String,
value: `#0c0`,
},
thumbTouchSize: {
type: PropTypes.Object,
value: `{width: 40, height: 40}`,
},
trackStyle: {
value: `{ height: 10,borderRadius:20 }`,
type: PropTypes.Object,
},
value: {
value: 50,
type: PropTypes.Number,
},
},
scope: {
Slider,
Icon,
},
imports: {
"react-native-elements": {
named: ["Slider", "Icon"],
},
},
});
return (
<React.Fragment>
<Playground params={params} />
</React.Fragment>
);
}
Example #25
| Source File: icon.playground.jsx From playground with MIT License | 4 votes |
|
IconPlayground = () => {
const params = useView({
componentName: "Icon",
props: {
brand: {
type: PropTypes.Boolean,
value: false,
},
color: {
type: PropTypes.String,
value: "#0CC",
},
Component: {
type: PropTypes.ReactNode,
value: null,
description:
"View if no onPress method is defined, TouchableHighlight if onPress method is defined",
},
containerStyle: {
type: PropTypes.Object,
value: `{}`,
},
disabled: {
type: PropTypes.Boolean,
value: false,
},
disabledStyle: {
type: PropTypes.Object,
value: `{}`,
},
iconProps: {
type: PropTypes.Object,
value: `{}`,
description: "{...Icon props}",
},
iconStyle: {
type: PropTypes.Object,
value: `{}`,
},
name: {
type: PropTypes.String,
value: "devices",
},
onLongPress: {
type: PropTypes.Function,
value: `() => console.log("onLongPress()")`,
},
onPress: {
type: PropTypes.Function,
value: `() => console.log("onPress()")`,
},
raised: {
type: PropTypes.Boolean,
value: false,
},
reverse: {
type: PropTypes.Boolean,
value: false,
},
reverseColor: {
type: PropTypes.String,
value: null,
},
size: {
type: PropTypes.Number,
value: 40,
},
solid: {
type: PropTypes.Boolean,
value: false,
},
type: {
type: PropTypes.String,
value: "material",
},
underlayColor: {
type: PropTypes.String,
value: null,
},
},
scope: {
Icon,
},
imports: {
"react-native-elements": {
named: ["Icon"],
},
},
});
return (
<React.Fragment>
<Playground params={params} />
</React.Fragment>
);
}
Example #26
| Source File: header.playground.jsx From playground with MIT License | 4 votes |
|
HeaderPlayground = () => {
const params = useView({
componentName: "Header",
props: {
backgroundColor: {
type: PropTypes.String,
value: null,
},
backgroundImage: {
type: PropTypes.Object,
value: null,
},
backgroundImageStyle: {
type: PropTypes.Object,
value: `{}`,
},
barStyle: {
type: PropTypes.Enum,
options: {
default: "default",
"light-content": "light-content",
"dark-content": "dark-content",
},
value: "default",
},
centerComponent: {
type: PropTypes.Object,
value: `{ text: 'MY TITLE', style: { color: '#fff' } }`,
description:
"{ text: string, ...Text props} OR { icon: string, ...Icon props} OR React element or component",
},
centerContainerStyle: {
type: PropTypes.Object,
value: `{}`,
},
containerStyle: {
type: PropTypes.Object,
value: `{width:350}`,
},
leftComponent: {
type: PropTypes.Object,
value: `{ icon: 'menu', color: '#fff' }`,
},
leftContainerStyle: {
type: PropTypes.Object,
value: `{}`,
description: `{...Gradient props}`,
},
linearGradientProps: {
type: PropTypes.Object,
value: `{}`,
},
placement: {
type: PropTypes.Enum,
options: {
center: "center",
left: "left",
right: "right",
},
value: "center",
},
rightComponent: {
type: PropTypes.Object,
value: `{ icon: 'home', color: '#fff' }`,
},
rightContainerStyle: {
type: PropTypes.Object,
value: `{}`,
},
statusBarProps: {
type: PropTypes.Object,
value: `{}`,
},
ViewComponent: {
type: PropTypes.ReactNode,
value: null,
},
},
scope: {
Header,
Icon,
},
imports: {
"react-native-elements": {
named: ["Header", "Icon"],
},
"react-native-safe-area-context": {
named: ["SafeAreaProvider"],
},
},
});
return (
<React.Fragment>
<SafeAreaProvider>
<Playground params={params} />
</SafeAreaProvider>
</React.Fragment>
);
}
Example #27
| Source File: WorkInRemote.js From id.co.moonlay-eworkplace-mobile with MIT License | 4 votes |
|
render() {
return (
<View>
<View style={{height:'22%'}}>
<Card containerStyle={{height:'100%'}}>
<View style={{flexDirection : 'row'}}>
<View style={{flex:4}}>
<Text style={{marginBottom: 10, fontWeight: 'bold', fontSize:20}}>
Work From Home
</Text>
<Text style={{marginBottom: 10}}>
Select to complete your attendance
</Text>
</View>
<View style={{flex:1}}>
<Button
icon={<Icon name='arrow-forward' color='#7C7C7C' type='font-awesome5' size={40} />}
type='clear'
buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0,}}
onPress={this.moveToWorkHome}
/>
</View>
</View>
</Card>
</View>
<View style={{height:'22%', paddingTop:10}}>
<Card containerStyle={{height:'100%'}}>
<View style={{flexDirection : 'row'}}>
<View style={{flex:4}}>
<Text style={{marginBottom: 10, fontWeight: 'bold', fontSize:20}}>
Work at Client's Office
</Text>
<Text style={{marginBottom: 10}}>
Select to complete your attendance
</Text>
</View>
<View style={{flex:1}}>
<Button
icon={<Icon name='arrow-forward' color='#7C7C7C' type='font-awesome5' size={40} />}
type='clear'
buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0,}}
onPress={this.moveToWorkClient}
/>
</View>
</View>
</Card>
</View>
<View style={{height:'22%', paddingTop:10}}>
<Card containerStyle={{height:'100%'}}>
<View style={{flexDirection : 'row'}}>
<View style={{flex:4}}>
<Text style={{marginBottom: 10, fontWeight: 'bold', fontSize:20}}>
Day Off
</Text>
<Text style={{marginBottom: 10}}>
Select to take day off and fill the form
</Text>
</View>
<View style={{flex:1}}>
<Button
icon={<Icon name='arrow-forward' color='#7C7C7C' type='font-awesome5' size={40} />}
type='clear'
buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0,}}
onPress={this.moveToDayOff}
/>
</View>
</View>
</Card>
</View>
<View style={{height:'22%', paddingTop:10}}>
<Card containerStyle={{height:'100%'}}>
<View style={{flexDirection : 'row'}}>
<View style={{flex:4}}>
<Text style={{marginBottom: 10, fontWeight: 'bold', fontSize:20}}>
Sick
</Text>
<Text style={{marginBottom: 10}}>
Select if you're sick to be able submit your attendance
</Text>
</View>
<View style={{flex:1}}>
<Button
icon={<Icon name='arrow-forward' color='#7C7C7C' type='font-awesome5' size={40} />}
type='clear'
buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0,}}
onPress={this.moveToSick}
/>
</View>
</View>
</Card>
</View>
</View>
)
}
Example #28
| Source File: Recipients.js From hugin-mobile with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { t } = this.props;
const payees = this.state.payees;
const noPayeesComponent =
<View style={{
width: '100%',
}}>
<Text style={{
color: this.props.screenProps.theme.primaryColour,
marginTop: 10,
fontSize: 16
}}>
{t('emptyAddressBook')}
</Text>
</View>;
const newMessageIndicator =
<Icon
reverse
name='ios-american-football'
type='ionicon'
color='#006BA7'
size={0}
/>;
const addressBookComponent =
<ScrollView
showsVerticalScrollIndicator={false}
style={{
width: '100%',
height: '70%',
marginBottom: 20,
backgroundColor: this.props.screenProps.theme.backgroundColour,
borderWidth: 0,
borderColor: 'transparent'
}}>
<FlatList
extraData={this.state.index}
ItemSeparatorComponent={null}
data={payees}
keyExtractor={item => item.nickname}
renderItem={({item}) => (
<ListItem
title={item.nickname}
subtitle={item.lastMessage ? <Text><Text>{item.lastMessage}{"\n"}</Text><Moment locale={Globals.language} style={{fontFamily: "Montserrat-Regular", fontSize: 10, textAlignVertical: 'bottom' }} element={Text} unix fromNow>{item.lastMessageTimestamp/1000}</Moment></Text> : t('noMessages')}
subtitleStyle={{
fontFamily: "Montserrat-Regular"
}}
chevron={item.read == '1' ? false : newMessageIndicator }
leftIcon={
<Image
style={{width: 50, height: 50}}
source={{uri: get_avatar(item.address)}}
/>
// <View style={{
// width: 50,
// height: 50,
// alignItems: 'center',
// justifyContent: 'center',
// backgroundColor: this.props.screenProps.theme.iconColour,
// borderRadius: 45
// }}>
// <Text style={[Styles.centeredText, {
// fontSize: 30,
// color: this.props.screenProps.theme.primaryColour,
// }]}>
// {item.nickname[0].toUpperCase()}
// </Text>
//
// </View>
}
titleStyle={{
color: this.props.screenProps.theme.primaryColour,
fontFamily: 'Montserrat-SemiBold'
}}showsVerticalScrollIndicator={false}
subtitleStyle={{
color: this.props.screenProps.theme.slightlyMoreVisibleColour,
fontFamily: 'Montserrat-Regular'
}}
onPress={async () => {
this.props.navigation.navigate(
'ChatScreen', {
payee: item,
}
);
await markConversationAsRead(item.address);
Globals.payees = await loadPayeeDataFromDatabase();
this.setState({
payees: Globals.payees
});
}}
/>
)}
/>
</ScrollView>;
return(
<View style={{
backgroundColor: this.props.screenProps.theme.backgroundColour,
flex: 1,
alignItems: 'flex-start',
justifyContent: 'flex-start',
}}>
<View style={{
flex: 1,
marginLeft: 30,
marginTop: 15,
width: '85%'
}}>
<TouchableWithoutFeedback
onPress={() => {
Globals.fromChat = true;
this.props.navigation.navigate('NewPayee', {
finishFunction: (item) => {
this.props.navigation.navigate(
'ChatScreen', {
payee: item,
});
}
})
}}
>
<View style={{
flexDirection: 'row',
justifyContent: 'space-between',
height: 40,
}}>
<Text style={{
marginLeft: 15,
color: this.props.screenProps.theme.primaryColour,
fontSize: 24,
fontFamily: "Montserrat-SemiBold"
}}>
{t('messagesTitle')}
</Text>
<View style={{
height: 37,
width: 37,
borderWidth: 1,
borderColor: this.props.screenProps.theme.notVeryVisibleColour,
borderRadius: 45,
alignItems: 'center',
justifyContent: 'center',
}}>
<SimpleLineIcons
name={'user-follow'}
size={24}
color={this.props.screenProps.theme.slightlyMoreVisibleColour}
padding={5}
/>
</View>
</View>
</TouchableWithoutFeedback>
<View style={{
backgroundColor: this.props.screenProps.theme.backgroundColour,
flex: 1,
marginRight: 15,
alignItems: 'flex-start',
justifyContent: 'flex-start',
}}>
{this.state.payees.length > 0 ? addressBookComponent : noPayeesComponent}
</View>
</View>
</View>
);
}
Example #29
| Source File: CompressMediaOperation.js From react-native-audio-video-tools with MIT License | 4 votes |
|
CompressMediaOperation = ({type, runIfInputFileCorrect, mediaTools, navigate, progressModal, updateProgressModal}) => {
const MediaTools = type === 'audio' ? AudioTools : VideoTools;
const [speed, setSpeed] = useState(SpeedList.normal);
const [quality, setQuality] = useState(QualityList.medium);
const [isModalVisible, setIsModalVisible] = useState(false);
const showCompressOptions = () => {
runIfInputFileCorrect(() => {
setIsModalVisible(true);
});
};
const compressMedia = async () => {
// Hide modal
setIsModalVisible(false);
// Display progress modal
updateProgressModal({
isVisible: true,
btnText: 'Cancel',
text: 'Compressing... This may take some time.',
onBtnText: () => {
MediaTools.cancel();
// duplicate this action as work around because it seems as the command does not work well once
MediaTools.cancel();
updateProgressModal({
isVisible: false,
});
},
});
// Get path to store the file
const outputFilePath = `${getBaseFilename()}/compressed_${type}_${await generatedFileName(mediaTools, type)}`;
const options = {quality, outputFilePath};
if (type === 'video') {
options.speed = speed;
}
try {
// Launch compression
const result = await mediaTools.compress(options);
updateProgressModal({
btnText: null,
text: 'Getting information about media...',
});
// Get different media details in order to show some statistics
const compressedMediaTools = new MediaTools(result.outputFilePath);
const mediaDetails = await mediaTools.getDetails();
const newMediaDetails = await compressedMediaTools.getDetails();
// redirect to result page
navigate(ROUTES.RESULT, {
content: {
mediaType: type,
newMediaType: type,
url: result.outputFilePath,
mediaDetails: mediaDetails,
newMediaDetails: newMediaDetails,
},
type: 'media'
});
} catch (e) {
toast.error(e ? e.toString() : e);
}
// Hide progress modal no matter the issue
updateProgressModal({
isVisible: false,
});
};
const media = type === 'audio' ? 'Audio' : 'Video';
return (
<>
<ControlPanelItem
bgColor={COLORS.Jade}
text={`Compress ${media}`}
onPress={showCompressOptions}
/>
<CustomModal
title={`${media} Compression`}
isVisible={isModalVisible}
rightText={"Start"}
leftText={"Cancel"}
onLeftClick={() => setIsModalVisible(false)}
onCloseClick={() => setIsModalVisible(false)}
onRightClick={compressMedia}
content={(
<View style={{}}>
<Text>Please select options or leave default one</Text>
<View style={styles.lisItemContainer}>
<Text style={{fontWeight: 'bold'}}>Quality:</Text>
<DropDownPicker
items={Object.values(QualityList).map(i => ({label: i, value: i}))}
defaultValue={quality}
containerStyle={{height: 40, flex: 0.7}}
style={{backgroundColor: '#fafafa'}}
itemStyle={{justifyContent: 'flex-start'}}
dropDownStyle={{backgroundColor: '#fafafa'}}
onChangeItem={item => setQuality(item.value)}
/>
</View>
{type === 'video' && (
<View style={styles.lisItemContainer}>
<Text style={{fontWeight: 'bold',}}>Speed:</Text>
<DropDownPicker
items={Object.values(SpeedList).map(i => ({label: i, value: i}))}
defaultValue={speed}
containerStyle={{height: 40, flex: 0.7}}
style={{backgroundColor: '#fafafa'}}
itemStyle={{justifyContent: 'flex-start'}}
dropDownStyle={{backgroundColor: '#fafafa'}}
onChangeItem={item => setSpeed(item.value)}
/>
</View>
)}
{type === 'video' && (
<View style={styles.lisItemContainer}>
<Icon name={'info-circle'} type="font-awesome-5"/>
<Text style={styles.infoText}>
The higher the speed, the less effective the compression is and
can in some cases lead to an <Text style={{fontWeight: 'bold'}}>opposite effect</Text>.
</Text>
</View>
)}
</View>
)}
/>
</>
);
}
