Scribd
Upload
4 views

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
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views

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
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