react-native-paper#Surface JavaScript Examples
The following examples show how to use
react-native-paper#Surface.
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: Card.js From Legacy with Mozilla Public License 2.0 | 6 votes |
|
export default function (props) {
var theme = useSelector(i=>i.themes[i.theme]);
return (
<TouchableRipple rippleColor="rgba(0, 0, 0, .32)" style={{ flex: props.noFlex===undefined?1:null, borderRadius: 8 }} onPress={props.onPress}>
<Surface style={{ ...(theme.page_content.border?{borderWidth:1,borderColor:theme.page_content.border}:{}), flex: props.noFlex===undefined?1:null, elevation: theme.page_content.border?0:4, padding: props.noPad === undefined ? 8 : 0, borderRadius: 8, backgroundColor: theme.page_content.bg, ...(props.cardStyle||{}) }}>
{props.children}
</Surface>
</TouchableRipple>
)
}
Example #2
| Source File: birth-date.screen.js From astrale with GNU General Public License v3.0 | 4 votes |
|
/**
* @param navigation
* @returns {*}
* @constructor
*/
function BirthDateScreen({ navigation }) {
const [{ session }, dispatch] = useGlobals();
const { colors } = useTheme();
const [date, setDate] = React.useState(new Date(642449499000));
const [sign, setSign] = React.useState(
ZodiacCalculator(date.getDate(), date.getMonth() + 1)
);
const [show, setShow] = React.useState(true);
React.useLayoutEffect(() => {
setSign(ZodiacCalculator(date.getDate(), date.getMonth() + 1));
}, [date]);
const onChange = (event, selectedDate) => {
const currentDate = selectedDate || date;
Platform.isAndroid && setShow(Platform.isIos);
setDate(currentDate);
};
const showDatePicker = () => {
setShow(true);
};
const _handleContinue = () => {
dispatch({
type: 'setSession',
fields: { birthDate: date.getTime(), sign },
});
navigation.push('Sex');
};
return (
<DefaultView>
<SpaceSky />
<Scorpio width={60} height={60} style={styles.scorpio} />
<Backgrounds.ConstellationSimple
color={colors.text}
dotColor={colors.primary}
height={200}
width={200}
style={styles.constellation}
/>
<View style={{ flex: 1 }} />
<View style={styles.textContainer}>
<Headline style={styles.textHeadline}>
{i18n.t('Your date of birth')}
</Headline>
<Text style={styles.textText}>
{i18n.t(
'{name}, to give you accurate and personal information we need to know some info',
{ name: session.name }
)}
</Text>
</View>
<View style={styles.logoContainer}>
<Sign sign={sign} width={50} showTitle={false} height={50} />
</View>
<Surface style={styles.dateContainer}>
{Platform.isAndroid && (
<Button style={{ alignSelf: 'center' }} onPress={showDatePicker}>
{i18n.t('Press to change')}
</Button>
)}
{show && (
<RNDateTimePicker
value={date}
display="spinner"
onChange={onChange}
on
minimumDate={new Date(1930, 0, 0)}
maximumDate={new Date(2010, 0, 0)}
textColor="#ffffff"
/>
)}
{Platform.isAndroid && (
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 40 }}>{DateUtils.toEuropean(date)}</Text>
</View>
)}
</Surface>
<View style={styles.buttonContainer}>
<Button mode="contained" disabled={!date} onPress={_handleContinue}>
{i18n.t('Continue')}
</Button>
</View>
</DefaultView>
);
}
Example #3
| Source File: learn.screen.js From astrale with GNU General Public License v3.0 | 4 votes |
|
/**
* @param navigation
* @returns {*}
* @constructor
*/
function LearnScreen({ navigation }) {
const dispatch = useGlobals()[1];
const { colors } = useTheme();
const handleViewLesson = async (lesson) => {
try {
dispatch({ type: 'toggleLoader' });
} catch {
} finally {
dispatch({ type: 'toggleLoader' });
navigation.navigate(lesson, { key: 1 });
}
};
return (
<SafeAreaView style={{ flex: 1 }}>
<SpaceSky />
<View style={{ marginBottom: 10 }}>
<MainNav style={{ top: 0 }} />
<View style={styles.headerContainer}>
<ShadowHeadline>{i18n.t('Learn')}</ShadowHeadline>
</View>
</View>
<ScrollViewFadeFirst element={<SubHeading />} height={140}>
<Surface
style={[
styles.surfaceRight,
{ backgroundColor: 'transparent', marginTop: 10 },
]}
>
<View style={[StyleSheet.absoluteFill, { top: -25, opacity: 0.8 }]}>
<Constellation
color={colors.text + '3D'}
dotColor={colors.accent}
width={250}
height={300}
/>
</View>
<LinearGradient
colors={['transparent', '#4c4c4c' + 'E6', '#4c4c4c' + 'E6']}
start={[0, 0]}
end={[1, 0]}
style={styles.gradientRight}
>
<View style={{ flex: 0.8 }} />
<View style={{ flex: 1 }}>
<Subheading
theme={{ colors: { text: '#FFFFFF' } }}
numberOfLines={1}
style={{ fontWeight: 'bold' }}
>
{i18n.t('About the Zodiac')}
</Subheading>
<Caption theme={{ colors: { text: '#FFFFFF' } }}>
{i18n.t('Older as mankind')}
</Caption>
<Caption
theme={{ colors: { text: '#FFFFFF' } }}
style={{ marginTop: -3 }}
>
{i18n.t('Bind to the sky')}
</Caption>
<View style={{ flex: 1, justifyContent: 'flex-end' }}>
<Button
mode="contained"
icon="lock-outline"
style={{ borderRadius: 25, marginTop: 5 }}
theme={{
colors: { primary: colors.backdrop, text: '#FFFFFF' },
}}
labelStyle={{ fontSize: 9, letterSpacing: 0 }}
onPress={() => handleViewLesson('AboutZodiac')}
>
{i18n.t('Watch an ad to unblock')}
</Button>
</View>
</View>
</LinearGradient>
</Surface>
<View style={{ height: 20 }} />
<Surface
style={[
styles.surfaceLeft,
{ backgroundColor: 'transparent', height: 140 },
]}
>
<View style={[StyleSheet.absoluteFill, { right: 150, opacity: 0.4 }]}>
<ConstellationSimple
color={colors.text + '3D'}
dotColor={colors.primary}
width={200}
height={150}
/>
</View>
<LinearGradient
colors={['#81411a', '#81411aE6', '#81411a3D', 'transparent']}
start={[0, 0]}
end={[1, 0]}
style={styles.gradientLeft}
>
<View style={{ flex: 1 }}>
<Subheading
theme={{ colors: { text: '#FFFFFF' } }}
numberOfLines={1}
style={{ fontWeight: 'bold' }}
>
{i18n.t('The signs')}
</Subheading>
<Caption theme={{ colors: { text: '#FFFFFF' } }}>
{i18n.t('The importance of when')}
</Caption>
<View style={{ flex: 1, justifyContent: 'flex-end' }}>
<Button
mode="contained"
icon="lock-outline"
style={{ borderRadius: 25 }}
theme={{
colors: { primary: colors.backdrop, text: '#FFFFFF' },
}}
labelStyle={{ fontSize: 9, letterSpacing: 0 }}
onPress={() => handleViewLesson('TheSigns')}
>
{i18n.t('Watch an ad to unblock')}
</Button>
</View>
</View>
<View style={{ flex: 0.6 }} />
</LinearGradient>
</Surface>
<View style={{ height: 20 }} />
<Surface
style={[
styles.surfaceRight,
{ backgroundColor: 'transparent', height: 130 },
]}
>
<View style={[StyleSheet.absoluteFill, { top: -25, opacity: 0.3 }]}>
<Leo color={colors.text} width={200} height={200} />
</View>
<LinearGradient
colors={['transparent', '#13366f' + 'E6', '#13366f' + 'E6']}
start={[0, 0]}
end={[1, 0]}
style={styles.gradientRight}
>
<View style={{ flex: 0.8 }} />
<View style={{ flex: 1 }}>
<Subheading
theme={{ colors: { text: '#FFFFFF' } }}
numberOfLines={1}
style={{ fontWeight: 'bold' }}
>
{i18n.t('The elements')}
</Subheading>
<Caption theme={{ colors: { text: '#FFFFFF' } }}>
{i18n.t('The pillars of life')}
</Caption>
<View style={{ flex: 1, justifyContent: 'flex-end' }}>
<Button
mode="contained"
icon="lock-outline"
style={{ borderRadius: 25, marginTop: 5 }}
theme={{ colors: { primary: colors.backdrop } }}
labelStyle={{ fontSize: 9, letterSpacing: 0 }}
onPress={() => handleViewLesson('TheElements')}
>
{i18n.t('Watch an ad to unblock')}
</Button>
</View>
</View>
</LinearGradient>
</Surface>
<View style={{ height: 150 }} />
</ScrollViewFadeFirst>
</SafeAreaView>
);
}
