Scribd
Upload
15 views3 pages

appcoding

The document contains a React Native application that prompts users to input a focus subject. It utilizes components such as TextInput and RoundedButton, and styles the interface with a dark background and white text. The application is structured to allow user interaction for setting a focus topic.

Uploaded by

akshj838
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
15 views3 pages

appcoding

The document contains a React Native application that prompts users to input a focus subject. It utilizes components such as TextInput and RoundedButton, and styles the interface with a dark background and white text. The application is structured to allow user interaction for setting a focus topic.

Uploaded by

akshj838
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

import React, { useState } from 'react';

import { Text, View, StyleSheet, Platform } from 'react-native';


import { Focus } from './src/features/focus/Focus'; // it is used for importing
feature from focus file
import { TextInput } from 'react-native-paper';

export default function App() {


const [focusSubject, setFocusSubject] = useState(null);
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}>What would you like to focus on ? </Text>
<View style={styles.inputContainer}>
<TextInput />
</View>
</View>
</View>
);
}

const styles = StyleSheet.create({


container: {
flex: 1,
backgroundColor: '#252250',
},
titleContainer: {
flex: 0.5,
padding: Platform.OS === 'android' ? 11 : 20,
justifyContent: 'center',
},
title: {
color: 'white',
fontWeight: 'bold',
fontSize: 23.5,
justifyContent: 'center',
},
inputContainer: {
paddingTop: 20,
},
});

import React, { useState } from 'react';


import { Text, View, StyleSheet, Platform } from 'react-native';
//import { Focus } from './src/features/focus/Focus'; // it is used for importing
feature from focus file
import { TextInput } from 'react-native-paper';
import { RoundedButton } from '../../components/RoundedButton';

export default function App() {


const [focusSubject, setFocusSubject] = useState(null);
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}>What would you like to focus on ? </Text>
<View style={styles.inputContainer}>
<TextInput style={{ flex: 1, marginRight: 15 }} />
<RoundedButton size={50} title="+" />
</View>
</View>
</View>
);
}

const styles = StyleSheet.create({


container: {
flex: 1,
backgroundColor: '#252250',
},
titleContainer: {
flex: 0.5,
padding: Platform.OS === 'android' ? 14 : 10,
//paddingBottom:200,
justifyContent: 'center',
},
title: {
color: 'white',
fontWeight: 'bold',
fontSize: 23.5,
justifyContent: 'center',
},
inputContainer: {
paddingTop: 20,
flexDirection: 'row',
},
});

app.js file code

import React, { useState } from 'react';


import { Text, View, StyleSheet, Platform } from 'react-native';
import { Focus } from './src/features/focus/Focus'; // it is used for importing
feature from focus file
import { TextInput } from 'react-native-paper';
import {RoundedButton} from "./src/components/RoundedButton";

export default function App() {


const [focusSubject, setFocusSubject] = useState(null);
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}>What would you like to focus on ? </Text>
<View style={styles.inputContainer}>
<TextInput style={{flex:1,marginRight:15}} />
<RoundedButton size={50} title = "+"/>
</View>
</View>
</View>
);
}

const styles = StyleSheet.create({


container: {
flex: 1,
backgroundColor: '#252250',
},
titleContainer: {
flex: 0.5,
padding: Platform.OS === 'android' ? 14 : 10,
//paddingBottom:200,
justifyContent: 'center',
},
title: {
color: 'white',
fontWeight: 'bold',
fontSize: 23.5,
justifyContent: 'center',
},
inputContainer: {
paddingTop: 20,
flexDirection:"row",
},
});

You might also like