react-native-paper#Avatar JavaScript Examples
The following examples show how to use
react-native-paper#Avatar.
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: AppbarHeader.js From mern-stack with MIT License | 7 votes |
|
render() {
const { currentUser, signedInWith, theme } = this.props;
let avatarUri = '';
if (currentUser) {
avatarUri = currentUser.provider[signedInWith].picture;
}
return (
<>
<StatusBar backgroundColor={theme.colors.primary} />
<Appbar.Header style={styles.appbar}>
<Appbar.Content title={this.props.title} />
{avatarUri ? (
<Avatar.Image
size={30}
source={{ uri: avatarUri }}
style={[{ backgroundColor: theme.colors.accent }, styles.avatar]}
/>
) : (
<Avatar.Icon
size={30}
icon="account"
style={[{ backgroundColor: theme.colors.accent }, styles.avatar]}
/>
)}
</Appbar.Header>
</>
);
}
Example #2
| Source File: profile-card.js From MediBuddy with MIT License | 6 votes |
|
export default function profileCard({
name,
avatar,
onSelected,
disableRightBtn,
}) {
const LeftContent = props => (
<Avatar.Image
{...props}
source={{
uri: avatar,
}}
/>
);
const RightContent = props => (
<IconButton
icon="arrow-right"
color="#0097e8"
size={20}
onPress={onSelected}
style={{ marginBottom: 24 }}
/>
);
return (
<Card.Title
title={name}
subtitle="View profile"
left={LeftContent}
right={disableRightBtn ? null : RightContent}
titleStyle={styles.cardTitle}
subtitleStyle={styles.cardSub}
/>
);
}
Example #3
| Source File: index.js From Cosmos with MIT License | 5 votes |
|
LeftContent = (props) => {
if (!props.src) {
return (
<Avatar.Icon size={props.size} icon={props.src ? props.src : 'folder'} />
);
}
return <Avatar.Image size={props.size} source={{uri: props.src}} />;
}
Example #4
| Source File: astrologers.screen.js From astrale with GNU General Public License v3.0 | 4 votes |
|
/**
* @param navigation
* @returns {*}
* @constructor
*/
function AstrologersScreen({ navigation }) {
const { colors } = useTheme();
const [showAdvice, setShowAdvice] = React.useState(true);
const _handleCloseAdvice = () => setShowAdvice(false);
const astrologist_colors = {
Western: '#0f3e6a',
Vedic: '#3d530d',
Hellenistic: '#735b13',
Oriental: '#62230d',
};
const dummy_astrologist = [
{
id: 1,
name: 'Marisa',
school: 'Hellenistic',
years_exp: 9,
stars: 4,
reviews: 125,
photo: require('./astrologers/marisa.jpg'),
},
{
id: 2,
name: 'Carter',
school: 'Western',
years_exp: 21,
stars: 5,
reviews: 120,
photo: require('./astrologers/carter.jpg'),
},
{
id: 3,
name: 'Samanta',
school: 'Oriental',
years_exp: 12,
stars: 5,
reviews: 321,
photo: require('./astrologers/samanta.jpg'),
},
{
id: 4,
name: 'Bianca',
school: 'Vedic',
years_exp: 45,
stars: 4,
reviews: 69,
photo: require('./astrologers/bianca.jpg'),
},
{
id: 5,
name: 'George',
school: 'Western',
years_exp: 15,
stars: 5,
reviews: 198,
photo: require('./astrologers/george.jpg'),
},
{
id: 6,
name: 'Meowi',
school: 'Oriental',
years_exp: 1,
stars: 5,
reviews: 7,
photo: require('./astrologers/meowi.jpg'),
},
];
return (
<SafeAreaView style={{ flex: 1 }}>
<SpaceSky />
<View style={{ marginBottom: 10 }}>
<MainNav style={{ top: 0 }} />
<View style={styles.headerContainer}>
<ShadowHeadline>{i18n.t('Astrologers')}</ShadowHeadline>
</View>
</View>
<ScrollView>
{showAdvice && (
<View
style={[
styles.adviceContainer,
{ borderColor: colors.primary + 'E6' },
]}
>
<MaterialCommunityIcons
onPress={_handleCloseAdvice}
name="close"
size={20}
style={styles.adviceClose}
color={colors.primary + 'E6'}
/>
<Title style={{ textAlign: 'center' }}>
{i18n.t('How it works')}
</Title>
<View style={{ marginTop: 10 }}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Avatar.Text
size={30}
label="1"
theme={{ colors: { primary: colors.primary + 'E6' } }}
labelStyle={{ fontSize: 22 }}
/>
<Text style={{ marginLeft: 15, fontSize: 12 }}>
{i18n.t('Select an astrologer')}
</Text>
</View>
<View
style={[
styles.listDivider,
{
borderLeftColor: colors.accent + 'E6',
},
]}
/>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Avatar.Text
size={30}
label="2"
theme={{ colors: { primary: colors.primary + 'E6' } }}
labelStyle={{ fontSize: 22 }}
/>
<Text
style={{
marginLeft: 15,
fontSize: 12,
}}
>
{i18n.t('Introduce your email and question')}
</Text>
</View>
<View
style={[
styles.listDivider,
{
borderLeftColor: colors.accent + 'E6',
},
]}
/>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Avatar.Text
size={30}
label="3"
theme={{ colors: { primary: colors.primary + 'E6' } }}
labelStyle={{ fontSize: 22 }}
/>
<Text
style={{
marginLeft: 15,
fontSize: 12,
}}
>
{i18n.t('Wait ~24 hours for the response')}
</Text>
</View>
</View>
</View>
)}
<View style={styles.astrologistContainer}>
{dummy_astrologist.map(
({ id, name, school, years_exp, stars, photo, reviews }, i) => (
<React.Fragment key={id}>
<TouchableRipple
onPress={() =>
navigation.navigate('Question', {
key: 'Profile',
astrologist: dummy_astrologist[i],
})
}
style={styles.astrologistCard}
underlayColor={colors.text + '33'}
borderless
>
<>
<Image
style={styles.astrologistImage}
source={photo}
resizeMethod="resize"
resizeMode="cover"
/>
<LinearGradient
colors={['transparent', 'rgba(0,0,0,0.8)']}
style={styles.astrologistGradient}
>
<Title theme={{ colors: { text: '#FFFFFF' } }}>
{name}
</Title>
</LinearGradient>
<Subheading
theme={{ colors: { text: '#FFFFFF' } }}
style={[
styles.astrologistSubheading,
{ backgroundColor: astrologist_colors[school] },
]}
>
{i18n.t(school, { word: i18n.t('Astrology') })}
</Subheading>
<View
style={[
styles.astrologistDetailsContainer,
{ borderColor: astrologist_colors[school] },
]}
>
<Text style={{ fontSize: 10 }}>
{years_exp} other years experience
</Text>
<View style={styles.astrologistStars}>
<MaterialCommunityIcons name="star" color="gold" />
<MaterialCommunityIcons name="star" color="gold" />
<MaterialCommunityIcons name="star" color="gold" />
<MaterialCommunityIcons name="star" color="gold" />
<MaterialCommunityIcons
name={stars === 5 ? 'star' : 'star-half'}
color="gold"
/>
<Text style={styles.astrologistReview}>{reviews}</Text>
</View>
</View>
</>
</TouchableRipple>
{i + (1 % 2) === 0 ? (
<View style={{ width: '100%', height: 50 }} />
) : null}
</React.Fragment>
)
)}
</View>
</ScrollView>
</SafeAreaView>
);
}
Example #5
| Source File: profile.screen.js From astrale with GNU General Public License v3.0 | 4 votes |
|
/**
* @param navigation
* @returns {*}
* @constructor
*/
function ProfileScreen({ navigation }) {
const [{ session }, dispatch] = useGlobals();
const { name, sign, birthDate, number, relationship, sex } = session;
const { colors } = useTheme();
const { setRate } = useRate();
const { setStartShare } = useShare(
i18n.t(
'Try Astrale, the most precise horoscopes app in this existential plain'
),
'https://play.google.com/store/apps/details?id=josep.astrale'
);
const isDark = useIsDark();
const isAndroid = PlatformUtils.isAndroid;
const _handleDarkThemeChange = () => {
dispatch({
type: 'switchTheme',
theme: isDark ? 'light' : 'dark',
});
};
const _handleLogOut = async () => {
await Storer.delete(SESSION_KEY);
dispatch({ type: 'setLogOut' });
};
const _handleRatePress = async () => setRate(true);
const _handleSharePress = async () => setStartShare(true);
return (
<BlurView
style={[StyleSheet.absoluteFill]}
tint={isDark ? 'dark' : 'light'}
intensity={isAndroid ? 150 : 100}
>
<Backgrounds.Telescope color={colors.text} style={styles.telescope} />
<Close position="right" />
<View style={styles.headerContainer}>
<Avatar.Text label={name.substring(0, 1)} />
<View style={{ marginLeft: 25 }}>
<Title>{i18n.t(sign)}</Title>
<Title>{DateUtils.toEuropean(new Date(birthDate))}</Title>
</View>
</View>
<Divider style={{ marginTop: 25 }} />
<View style={styles.detailsContainer}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialCommunityIcons
name="gender-transgender"
color={colors.text}
size={18}
/>
<Text style={{ marginLeft: 10 }}>{i18n.t(sex)} </Text>
</View>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialCommunityIcons
name="heart-circle"
color={colors.text}
size={18}
/>
<Text style={{ marginLeft: 10 }}>{i18n.t(relationship)} </Text>
</View>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialCommunityIcons name="dice-6" color={colors.text} size={18} />
<Text style={{ marginLeft: 10 }}>{number} </Text>
</View>
</View>
<Divider style={{ marginTop: 15 }} />
<View style={styles.buttonsContainer}>
<Button
onPress={_handleSharePress}
icon="account-multiple"
style={{ marginTop: 10 }}
labelStyle={styles.buttonsLabel}
uppercase={false}
contentStyle={{ justifyContent: 'flex-start' }}
>
{i18n.t('Share with your friends')}
</Button>
<Button
onPress={_handleRatePress}
icon="message-draw"
style={{ marginTop: 10 }}
labelStyle={styles.buttonsLabel}
uppercase={false}
contentStyle={{ justifyContent: 'flex-start' }}
>
{i18n.t('Rate the app')}
</Button>
{__DEV__ && (
<Button
onPress={_handleLogOut}
icon="restart"
style={{ marginTop: 10 }}
labelStyle={styles.buttonsLabel}
uppercase={false}
contentStyle={{ justifyContent: 'flex-start' }}
>
{i18n.t('Restart')}
</Button>
)}
</View>
<Divider style={{ marginTop: 10 }} />
<View style={styles.optionsContainer}>
<View style={styles.optionsOption}>
<Button
icon="brightness-6"
style={styles.optionsButton}
labelStyle={styles.optionsLabel}
uppercase={false}
theme={{ colors: { primary: colors.text } }}
>
{i18n.t('Dark theme')}
</Button>
<Switch onChange={_handleDarkThemeChange} value={isDark} />
</View>
</View>
<Divider style={{ marginTop: 10 }} />
<View
style={[
{
position: 'absolute',
bottom: 20,
alignItems: 'center',
justifyContent: 'center',
width: '100%',
},
]}
>
<Text>v{Constants.manifest.version}</Text>
</View>
</BlurView>
);
}
Example #6
| Source File: tab-bar.js From MediBuddy with MIT License | 4 votes |
|
function TabBar({
state,
descriptors,
navigation,
navigationState,
position,
theme,
}) {
const { colors } = theme;
const [visible, setvisible] = React.useState(false);
/** Indicator transition */
const indicatorTranslateX = Animated.interpolate(position, {
inputRange: [0, 1, 2, 3],
outputRange: [110, 2 * width + 24, 3 * width + 24, 4 * width + 48],
});
const indicatorWidth = Animated.interpolate(position, {
inputRange: [0, 1, 2, 3],
outputRange: [140, 100, 140, 100],
});
const TabIcon = ({ route, index }) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
return (
<TouchableOpacity key={index} style={styles.tab} onPress={onPress}>
<Text
style={
(styles.tabTxt,
{
color:
index === navigationState.index ? colors.accent : '#bdc3c7',
})
}>
{label}
</Text>
</TouchableOpacity>
);
};
return (
<View>
<GeneralStatusBar backgroundColor="#ffff" />
<View style={styles.tabView}>
<Avatar.Image
size={50}
style={styles.icon}
source={{
uri: 'https://i.ya-webdesign.com/images/male-avatar-icon-png-7.png',
}}
/>
{state.routes.map((route, index) => {
return <TabIcon route={route} index={index} />;
})}
<View style={styles.sideMenu}>
<Menu
visible={visible}
onDismiss={() => setvisible(false)}
anchor={
<TouchableOpacity onPress={() => setvisible(true)}>
<View style={styles.dropView}>
<Text style={styles.name}>Dr. Christian Wade</Text>
<Icon name="keyboard-arrow-down" size={24} color="#bdc3c7" />
</View>
</TouchableOpacity>
}>
<Menu.Item onPress={() => {}} title="Request Leave" />
<Menu.Item onPress={() => {}} title="Provide Feeback" />
<Divider />
<Menu.Item onPress={() => {}} title="Check for Updates" />
<Menu.Item onPress={() => {}} title="Logout " />
</Menu>
<Avatar.Image
size={50}
style={styles.avatar}
source={{
uri:
'https://i.ya-webdesign.com/images/male-avatar-icon-png-7.png',
}}
/>
<CustomIcon name="bell" />
<CustomIcon name="settings" />
<CustomIcon name="magnify" />
</View>
</View>
<Animated.View
style={[
styles.indicator,
{
left: indicatorTranslateX,
backgroundColor: colors.accent,
width: indicatorWidth,
},
]}
/>
</View>
);
}
