summaryrefslogtreecommitdiff
path: root/frontend/app/screens/social
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/app/screens/social')
-rw-r--r--frontend/app/screens/social/contacts.js124
-rw-r--r--frontend/app/screens/social/feed.js73
-rw-r--r--frontend/app/screens/social/index.js7
-rw-r--r--frontend/app/screens/social/notifications.js98
-rw-r--r--frontend/app/screens/social/profile1.js104
-rw-r--r--frontend/app/screens/social/profile2.js108
-rw-r--r--frontend/app/screens/social/profile3.js96
-rw-r--r--frontend/app/screens/social/profileSettings.js200
8 files changed, 810 insertions, 0 deletions
diff --git a/frontend/app/screens/social/contacts.js b/frontend/app/screens/social/contacts.js
new file mode 100644
index 0000000..8eaacae
--- /dev/null
+++ b/frontend/app/screens/social/contacts.js
@@ -0,0 +1,124 @@
+import React from 'react';
+import {
+ FlatList,
+ View,
+ StyleSheet,
+ TouchableOpacity,
+} from 'react-native';
+import _ from 'lodash';
+import {
+ RkStyleSheet,
+ RkText,
+ RkTextInput,
+} from 'react-native-ui-kitten';
+import { data } from '../../data';
+import { Avatar } from '../../components/avatar';
+import { FontAwesome } from '../../assets/icons';
+import NavigationType from '../../config/navigation/propTypes';
+
+export class Contacts extends React.Component {
+ static propTypes = {
+ navigation: NavigationType.isRequired,
+ };
+ static navigationOptions = {
+ title: 'Contacts'.toUpperCase(),
+ };
+
+ state = {
+ data: {
+ original: data.getUsers(),
+ filtered: data.getUsers(),
+ },
+ };
+
+ extractItemKey = (item) => `${item.id}`;
+
+ onSearchInputChanged = (event) => {
+ const pattern = new RegExp(event.nativeEvent.text, 'i');
+ const contacts = _.filter(this.state.data.original, contact => {
+ const filterResult = {
+ firstName: contact.firstName.search(pattern),
+ lastName: contact.lastName.search(pattern),
+ };
+ return filterResult.firstName !== -1 || filterResult.lastName !== -1 ? contact : undefined;
+ });
+ this.setState({
+ data: {
+ original: this.state.data.original,
+ filtered: contacts,
+ },
+ });
+ };
+
+ onItemPressed = (item) => {
+ this.props.navigation.navigate('ProfileV1', { id: item.id });
+ };
+
+ renderItem = ({ item }) => (
+ <TouchableOpacity onPress={() => this.onItemPressed(item)}>
+ <View style={styles.container}>
+ <Avatar rkType='circle' style={styles.avatar} img={item.photo} />
+ <RkText>{`${item.firstName} ${item.lastName}`}</RkText>
+ </View>
+ </TouchableOpacity>
+ );
+
+ renderSeparator = () => (
+ <View style={styles.separator} />
+ );
+
+ renderHeaderLabel = () => (
+ <RkText rkType='awesome'>{FontAwesome.search}</RkText>
+ );
+
+ renderHeader = () => (
+ <View style={styles.searchContainer}>
+ <RkTextInput
+ autoCapitalize='none'
+ autoCorrect={false}
+ onChange={this.onSearchInputChanged}
+ label={this.renderHeaderLabel()}
+ rkType='row'
+ placeholder='Search'
+ />
+ </View>
+ );
+
+ render = () => (
+ <FlatList
+ style={styles.root}
+ data={this.state.data.filtered}
+ renderItem={this.renderItem}
+ ListHeaderComponent={this.renderHeader}
+ ItemSeparatorComponent={this.renderSeparator}
+ keyExtractor={this.extractItemKey}
+ enableEmptySections
+ />
+ )
+}
+
+const styles = RkStyleSheet.create(theme => ({
+ root: {
+ backgroundColor: theme.colors.screen.base,
+ },
+ searchContainer: {
+ backgroundColor: theme.colors.screen.bold,
+ paddingHorizontal: 16,
+ paddingVertical: 10,
+ height: 60,
+ alignItems: 'center',
+ },
+ container: {
+ flexDirection: 'row',
+ padding: 16,
+ alignItems: 'center',
+ },
+ avatar: {
+ marginRight: 16,
+ },
+ separator: {
+ flex: 1,
+ height: StyleSheet.hairlineWidth,
+ backgroundColor: theme.colors.border.base,
+ },
+}));
diff --git a/frontend/app/screens/social/feed.js b/frontend/app/screens/social/feed.js
new file mode 100644
index 0000000..3de46f2
--- /dev/null
+++ b/frontend/app/screens/social/feed.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+ FlatList,
+ View,
+ Image,
+} from 'react-native';
+import {
+ RkCard,
+ RkText, RkStyleSheet,
+} from 'react-native-ui-kitten';
+import { Avatar } from '../../components/avatar';
+import { SocialBar } from '../../components/socialBar';
+import { data } from '../../data';
+
+const moment = require('moment');
+
+export class Feed extends React.Component {
+ static navigationOptions = {
+ title: 'Feed'.toUpperCase(),
+ };
+
+ state = {
+ data: data.getArticles('post'),
+ };
+
+ extractItemKey = (item) => `${item.id}`;
+
+ renderItem = ({ item }) => (
+ <RkCard style={styles.card}>
+ <View rkCardHeader>
+ <Avatar
+ rkType='small'
+ style={styles.avatar}
+ img={item.user.photo}
+ />
+ <View>
+ <RkText rkType='header4'>{`${item.user.firstName} ${item.user.lastName}`}</RkText>
+ <RkText rkType='secondary2 hintColor'>{moment().add(item.time, 'seconds').fromNow()}</RkText>
+ </View>
+ </View>
+ <Image rkCardImg source={item.photo} />
+ <View rkCardContent>
+ <RkText rkType='primary3'>{item.text}</RkText>
+ </View>
+ <View rkCardFooter>
+ <SocialBar />
+ </View >
+ </RkCard>
+ );
+
+ render = () => (
+ <FlatList
+ data={this.state.data}
+ renderItem={this.renderItem}
+ keyExtractor={this.extractItemKey}
+ style={styles.container}
+ />
+ );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+ container: {
+ backgroundColor: theme.colors.screen.scroll,
+ paddingVertical: 8,
+ paddingHorizontal: 10,
+ },
+ card: {
+ marginVertical: 8,
+ },
+ avatar: {
+ marginRight: 16,
+ },
+}));
diff --git a/frontend/app/screens/social/index.js b/frontend/app/screens/social/index.js
new file mode 100644
index 0000000..bd66176
--- /dev/null
+++ b/frontend/app/screens/social/index.js
@@ -0,0 +1,7 @@
+export * from './profile1';
+export * from './profile2';
+export * from './profile3';
+export * from './profileSettings';
+export * from './notifications';
+export * from './contacts';
+export * from './feed';
diff --git a/frontend/app/screens/social/notifications.js b/frontend/app/screens/social/notifications.js
new file mode 100644
index 0000000..c397d17
--- /dev/null
+++ b/frontend/app/screens/social/notifications.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import {
+ FlatList,
+ View,
+ Image,
+} from 'react-native';
+import { RkStyleSheet, RkText } from 'react-native-ui-kitten';
+import { Avatar } from '../../components';
+import { data } from '../../data';
+
+const moment = require('moment');
+
+export class Notifications extends React.Component {
+ static navigationOptions = {
+ title: 'Notifications',
+ };
+
+ state = {
+ data: data.getNotifications(),
+ };
+
+ extractItemKey = (item) => `${item.id}`;
+
+ renderAttachment = (item) => {
+ const hasAttachment = item.attach !== undefined;
+ return hasAttachment ? <View /> : <Image style={styles.attachment} source={item.attach} />;
+ };
+
+ renderItem = ({ item }) => (
+ <View style={styles.container}>
+ <Avatar
+ img={item.user.photo}
+ rkType='circle'
+ style={styles.avatar}
+ badge={item.type}
+ />
+ <View style={styles.content}>
+ <View style={styles.mainContent}>
+ <View style={styles.text}>
+ <RkText>
+ <RkText rkType='header6'>{`${item.user.firstName} ${item.user.lastName}`}</RkText>
+ <RkText rkType='primary2'> {item.description}</RkText>
+ </RkText>
+ </View>
+ <RkText
+ rkType='secondary5 hintColor'>{moment().add(item.time, 'seconds').fromNow()}
+ </RkText>
+ </View>
+ {this.renderAttachment(item)}
+ </View>
+ </View>
+ );
+
+ render = () => (
+ <FlatList
+ style={styles.root}
+ data={this.state.data}
+ renderItem={this.renderItem}
+ keyExtractor={this.extractItemKey}
+ />
+ );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+ root: {
+ backgroundColor: theme.colors.screen.base,
+ },
+ container: {
+ padding: 16,
+ flexDirection: 'row',
+ borderBottomWidth: 1,
+ borderColor: theme.colors.border.base,
+ alignItems: 'flex-start',
+ },
+ avatar: {},
+ text: {
+ marginBottom: 5,
+ },
+ content: {
+ flex: 1,
+ marginLeft: 16,
+ marginRight: 0,
+ },
+ mainContent: {
+ marginRight: 60,
+ },
+ img: {
+ height: 50,
+ width: 50,
+ margin: 0,
+ },
+ attachment: {
+ position: 'absolute',
+ right: 0,
+ height: 50,
+ width: 50,
+ },
+}));
diff --git a/frontend/app/screens/social/profile1.js b/frontend/app/screens/social/profile1.js
new file mode 100644
index 0000000..1f3ec09
--- /dev/null
+++ b/frontend/app/screens/social/profile1.js
@@ -0,0 +1,104 @@
+import React from 'react';
+import {
+ View,
+ ScrollView,
+} from 'react-native';
+import {
+ RkText,
+ RkButton, RkStyleSheet,
+} from 'react-native-ui-kitten';
+import { Avatar } from '../../components/avatar';
+import { Gallery } from '../../components/gallery';
+import { data } from '../../data/';
+import formatNumber from '../../utils/textUtils';
+import NavigationType from '../../config/navigation/propTypes';
+
+export class ProfileV1 extends React.Component {
+ static propTypes = {
+ navigation: NavigationType.isRequired,
+ };
+ static navigationOptions = {
+ title: 'User Profile'.toUpperCase(),
+ };
+
+ state = {
+ data: undefined,
+ };
+
+ constructor(props) {
+ super(props);
+ const id = this.props.navigation.getParam('id', 1);
+ this.state.data = data.getUser(id);
+ }
+
+ render = () => (
+ <ScrollView style={styles.root}>
+ <View style={[styles.header, styles.bordered]}>
+ <Avatar img={this.state.data.photo} rkType='big' />
+ <RkText rkType='header2'>{`${this.state.data.firstName} ${this.state.data.lastName}`}</RkText>
+ </View>
+ <View style={[styles.userInfo, styles.bordered]}>
+ <View style={styles.section}>
+ <RkText rkType='header3' style={styles.space}>{this.state.data.postCount}</RkText>
+ <RkText rkType='secondary1 hintColor'>Posts</RkText>
+ </View>
+ <View style={styles.section}>
+ <RkText rkType='header3' style={styles.space}>{formatNumber(this.state.data.followersCount)}</RkText>
+ <RkText rkType='secondary1 hintColor'>Followers</RkText>
+ </View>
+ <View style={styles.section}>
+ <RkText rkType='header3' style={styles.space}>{this.state.data.followingCount}</RkText>
+ <RkText rkType='secondary1 hintColor'>Following</RkText>
+ </View>
+ </View>
+ <View style={styles.buttons}>
+ <RkButton style={styles.button} rkType='clear link'>FOLLOW</RkButton>
+ <View style={styles.separator} />
+ <RkButton style={styles.button} rkType='clear link'>MESSAGE</RkButton>
+ </View>
+ <Gallery items={this.state.data.images} />
+ </ScrollView>
+ );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+ root: {
+ backgroundColor: theme.colors.screen.base,
+ },
+ header: {
+ alignItems: 'center',
+ paddingTop: 25,
+ paddingBottom: 17,
+ },
+ userInfo: {
+ flexDirection: 'row',
+ paddingVertical: 18,
+ },
+ bordered: {
+ borderBottomWidth: 1,
+ borderColor: theme.colors.border.base,
+ },
+ section: {
+ flex: 1,
+ alignItems: 'center',
+ },
+ space: {
+ marginBottom: 3,
+ },
+ separator: {
+ backgroundColor: theme.colors.border.base,
+ alignSelf: 'center',
+ flexDirection: 'row',
+ flex: 0,
+ width: 1,
+ height: 42,
+ },
+ buttons: {
+ flexDirection: 'row',
+ paddingVertical: 8,
+ },
+ button: {
+ flex: 1,
+ alignSelf: 'center',
+ },
+}));
diff --git a/frontend/app/screens/social/profile2.js b/frontend/app/screens/social/profile2.js
new file mode 100644
index 0000000..1636910
--- /dev/null
+++ b/frontend/app/screens/social/profile2.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import {
+ View,
+ ScrollView,
+} from 'react-native';
+import {
+ RkText,
+ RkButton, RkStyleSheet,
+} from 'react-native-ui-kitten';
+import {
+ Avatar,
+ Gallery,
+} from '../../components';
+import { data } from '../../data';
+import { FontIcons } from '../../assets/icons';
+import formatNumber from '../../utils/textUtils';
+
+export class ProfileV2 extends React.Component {
+ static navigationOptions = {
+ title: 'User Profile'.toUpperCase(),
+ };
+
+ state = {
+ data: data.getUser(),
+ };
+
+ render = () => (
+ <ScrollView style={styles.root}>
+ <View style={[styles.header, styles.bordered]}>
+ <View style={styles.row}>
+ <View style={styles.buttons}>
+ <RkButton style={styles.button} rkType='icon circle'>
+ <RkText rkType='moon large primary'>{FontIcons.profile}</RkText>
+ </RkButton>
+ </View>
+ <Avatar img={this.state.data.photo} rkType='big' />
+ <View style={styles.buttons}>
+ <RkButton style={styles.button} rkType='icon circle'>
+ <RkText rkType='moon large primary'>{FontIcons.mail}</RkText>
+ </RkButton>
+ </View>
+ </View>
+ <View style={styles.section}>
+ <RkText rkType='header2'>{`${this.state.data.firstName} ${this.state.data.lastName}`}</RkText>
+ </View>
+ </View>
+ <View style={styles.userInfo}>
+ <View style={styles.section}>
+ <RkText rkType='header3' style={styles.space}>{this.state.data.postCount}</RkText>
+ <RkText rkType='secondary1 hintColor'>Posts</RkText>
+ </View>
+ <View style={styles.section}>
+ <RkText rkType='header3' style={styles.space}>{formatNumber(this.state.data.followersCount)}</RkText>
+ <RkText rkType='secondary1 hintColor'>Followers</RkText>
+ </View>
+ <View style={styles.section}>
+ <RkText rkType='header3' style={styles.space}>{this.state.data.followingCount}</RkText>
+ <RkText rkType='secondary1 hintColor'>Following</RkText>
+ </View>
+ </View>
+ <Gallery items={this.state.data.images} />
+ </ScrollView>
+ );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+ root: {
+ backgroundColor: theme.colors.screen.base,
+ },
+ header: {
+ paddingTop: 25,
+ paddingBottom: 17,
+ },
+ row: {
+ flexDirection: 'row',
+
+ },
+ userInfo: {
+ flexDirection: 'row',
+ paddingVertical: 18,
+ },
+ bordered: {
+ borderBottomWidth: 1,
+ borderColor: theme.colors.border.base,
+ },
+ section: {
+ flex: 1,
+ alignItems: 'center',
+ },
+ space: {
+ marginBottom: 3,
+ },
+ separator: {
+ backgroundColor: theme.colors.border.base,
+ alignSelf: 'center',
+ flexDirection: 'row',
+ flex: 0,
+ width: 1,
+ height: 42,
+ },
+ buttons: {
+ flex: 1,
+ },
+ button: {
+ marginTop: 27.5,
+ alignSelf: 'center',
+ },
+}));
diff --git a/frontend/app/screens/social/profile3.js b/frontend/app/screens/social/profile3.js
new file mode 100644
index 0000000..985dc1e
--- /dev/null
+++ b/frontend/app/screens/social/profile3.js
@@ -0,0 +1,96 @@
+import React from 'react';
+import {
+ View,
+ ScrollView,
+} from 'react-native';
+import {
+ RkStyleSheet,
+ RkText,
+} from 'react-native-ui-kitten';
+import {
+ Avatar,
+ Gallery,
+ GradientButton,
+} from '../../components';
+import { data } from '../../data';
+import formatNumber from '../../utils/textUtils';
+
+export class ProfileV3 extends React.Component {
+ static navigationOptions = {
+ title: 'User Profile'.toUpperCase(),
+ };
+
+ state = {
+ data: data.getUser(),
+ };
+
+ render = () => (
+ <ScrollView style={styles.root}>
+ <View style={[styles.header, styles.bordered]}>
+ <Avatar img={this.state.data.photo} rkType='big' />
+ <RkText rkType='header2'>{`${this.state.data.firstName} ${this.state.data.lastName}`}</RkText>
+ <GradientButton style={styles.button} text='FOLLOW' />
+ </View>
+
+ <View style={styles.userInfo}>
+ <View style={styles.section}>
+ <RkText rkType='header3' style={styles.space}>{this.state.data.postCount}</RkText>
+ <RkText rkType='secondary1 hintColor'>Posts</RkText>
+ </View>
+ <View style={styles.section}>
+ <RkText rkType='header3' style={styles.space}>{formatNumber(this.state.data.followersCount)}</RkText>
+ <RkText rkType='secondary1 hintColor'>Followers</RkText>
+ </View>
+ <View style={styles.section}>
+ <RkText rkType='header3' style={styles.space}>{this.state.data.followingCount}</RkText>
+ <RkText rkType='secondary1 hintColor'>Following</RkText>
+ </View>
+ </View>
+ <Gallery items={this.state.data.images} />
+ </ScrollView>
+ );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+ root: {
+ backgroundColor: theme.colors.screen.base,
+ },
+ header: {
+ alignItems: 'center',
+ paddingTop: 25,
+ paddingBottom: 17,
+ },
+ userInfo: {
+ flexDirection: 'row',
+ paddingVertical: 18,
+ },
+ bordered: {
+ borderBottomWidth: 1,
+ borderColor: theme.colors.border.base,
+ },
+ section: {
+ flex: 1,
+ alignItems: 'center',
+ },
+ space: {
+ marginBottom: 3,
+ },
+ separator: {
+ backgroundColor: theme.colors.border.base,
+ alignSelf: 'center',
+ flexDirection: 'row',
+ flex: 0,
+ width: 1,
+ height: 42,
+ },
+ buttons: {
+ flexDirection: 'row',
+ paddingVertical: 8,
+ },
+ button: {
+ marginTop: 18,
+ alignSelf: 'center',
+ width: 140,
+ },
+
+}));
diff --git a/frontend/app/screens/social/profileSettings.js b/frontend/app/screens/social/profileSettings.js
new file mode 100644
index 0000000..0be1b94
--- /dev/null
+++ b/frontend/app/screens/social/profileSettings.js
@@ -0,0 +1,200 @@
+import React from 'react';
+import {
+ ScrollView,
+ View,
+ StyleSheet,
+} from 'react-native';
+import {
+ RkText,
+ RkTextInput,
+ RkAvoidKeyboard,
+ RkTheme,
+ RkStyleSheet,
+} from 'react-native-ui-kitten';
+import { data } from '../../data';
+import {
+ Avatar,
+ SocialSetting,
+ GradientButton,
+} from '../../components';
+import { FontAwesome } from '../../assets/icons';
+
+export class ProfileSettings extends React.Component {
+ static navigationOptions = {
+ title: 'Profile Settings'.toUpperCase(),
+ };
+
+ user = data.getUser();
+
+ state = {
+ firstName: this.user.firstName,
+ lastName: this.user.lastName,
+ email: this.user.email,
+ country: this.user.country,
+ phone: this.user.phone,
+ password: this.user.password,
+ newPassword: this.user.newPassword,
+ confirmPassword: this.user.confirmPassword,
+ };
+
+ onFirstNameInputChanged = (text) => {
+ this.setState({ firstName: text });
+ };
+
+ onLastNameInputChanged = (text) => {
+ this.setState({ lastName: text });
+ };
+
+ onEmailInputChanged = (text) => {
+ this.setState({ email: text });
+ };
+
+ onCountryInputChanged = (text) => {
+ this.setState({ country: text });
+ };
+
+ onPhoneInputChanged = (text) => {
+ this.setState({ phone: text });
+ };
+
+ onPasswordInputChanged = (text) => {
+ this.setState({ password: text });
+ };
+
+ onNewPasswordInputChanged = (text) => {
+ this.setState({ newPassword: text });
+ };
+
+ onConfirmPasswordInputChanged = (text) => {
+ this.setState({ confirmPassword: text });
+ };
+
+ render = () => (
+ <ScrollView style={styles.root}>
+ <RkAvoidKeyboard>
+ <View style={styles.header}>
+ <Avatar img={this.user.photo} rkType='big' />
+ </View>
+ <View style={styles.section}>
+ <View style={[styles.row, styles.heading]}>
+ <RkText rkType='header6 primary'>INFO</RkText>
+ </View>
+ <View style={styles.row}>
+ <RkTextInput
+ label='First Name'
+ value={this.state.firstName}
+ rkType='right clear'
+ onChangeText={this.onFirstNameInputChanged}
+ />
+ </View>
+ <View style={styles.row}>
+ <RkTextInput
+ label='Last Name'
+ value={this.state.lastName}
+ onChangeText={this.onLastNameInputChanged}
+ rkType='right clear'
+ />
+ </View>
+ <View style={styles.row}>
+ <RkTextInput
+ label='Email'
+ value={this.state.email}
+ onChangeText={this.onEmailInputChanged}
+ rkType='right clear'
+ />
+ </View>
+ <View style={styles.row}>
+ <RkTextInput
+ label='Country'
+ value={this.state.country}
+ onChangeText={this.onCountryInputChanged}
+ rkType='right clear'
+ />
+ </View>
+ <View style={styles.row}>
+ <RkTextInput
+ label='Phone'
+ value={this.state.phone}
+ onChangeText={this.onPhoneInputChanged}
+ rkType='right clear'
+ />
+ </View>
+ </View>
+ <View style={styles.section}>
+ <View style={[styles.row, styles.heading]}>
+ <RkText rkType='primary header6'>CHANGE PASSWORD</RkText>
+ </View>
+ <View style={styles.row}>
+ <RkTextInput
+ label='Old Password'
+ value={this.state.password}
+ rkType='right clear'
+ secureTextEntry
+ onChangeText={this.onPasswordInputChanged}
+ />
+ </View>
+ <View style={styles.row}>
+ <RkTextInput
+ label='New Password'
+ value={this.state.newPassword}
+ rkType='right clear'
+ secureTextEntry
+ onChangeText={this.onNewPasswordInputChanged}
+ />
+ </View>
+ <View style={styles.row}>
+ <RkTextInput
+ label='Confirm Password'
+ value={this.state.confirmPassword}
+ rkType='right clear'
+ secureTextEntry
+ onChangeText={this.onConfirmPasswordInputChanged}
+ />
+ </View>
+ </View>
+ <View style={styles.section}>
+ <View style={[styles.row, styles.heading]}>
+ <RkText rkType='primary header6'>CONNECT YOUR ACCOUNT</RkText>
+ </View>
+ <View style={styles.row}>
+ <SocialSetting name='Twitter' icon={FontAwesome.twitter} tintColor={RkTheme.current.colors.twitter} />
+ </View>
+ <View style={styles.row}>
+ <SocialSetting name='Google' icon={FontAwesome.google} tintColor={RkTheme.current.colors.google} />
+ </View>
+ <View style={styles.row}>
+ <SocialSetting name='Facebook' icon={FontAwesome.facebook} tintColor={RkTheme.current.colors.facebook} />
+ </View>
+ </View>
+ <GradientButton rkType='large' style={styles.button} text='SAVE' />
+ </RkAvoidKeyboard>
+ </ScrollView>
+ );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+ root: {
+ backgroundColor: theme.colors.screen.base,
+ },
+ header: {
+ backgroundColor: theme.colors.screen.neutral,
+ paddingVertical: 25,
+ },
+ section: {
+ marginVertical: 25,
+ },
+ heading: {
+ paddingBottom: 12.5,
+ },
+ row: {
+ flexDirection: 'row',
+ paddingHorizontal: 17.5,
+ borderBottomWidth: StyleSheet.hairlineWidth,
+ borderColor: theme.colors.border.base,
+ alignItems: 'center',
+ },
+ button: {
+ marginHorizontal: 16,
+ marginBottom: 32,
+ },
+}));