Experiment No 5

Aim:
Adding user interactivity in the base components and customization of layout using
functions provided by React Native and XAML.

Theory:
React Native is a popular framework for cross-platform mobile app development. It is based
on the principle of ‘reactive components’. Hence, the quality of implementation for the
components is often the central problem in react native component design and
development.
One approach trying to resolving the complexity is following standardized modes of building
components, usually in the form of plug-ins and libraries.
Because React works on TypeScript + JSX and is inherently declarative and modular in
structure, utilizing these top React Native UI component libraries becomes much more
straightforward when you understand the basic architecture and their capabilities.
These components provide various functionalities, including buttons, text inputs, images,
and more, to help developers easily create visually appealing and interactive apps.
Whether a beginner or an experienced developer, React Native UI Components offer a fast
and easy way to bring your app ideas to life.
Developers use React Native UI Components for several reasons:
• Cross-platform Compatibility: React Native UI Components are compatible with
Android and iOS platforms, making it easier for developers to create apps that can
run on multiple platforms without having to write separate code for each.
• Reusability: The pre-built components can be easily reused in other projects, saving
developers time and effort.
• Customization: The components are highly customizable, allowing developers to
change their appearance and behavior to meet the specific needs of their projects.
• Improved UX: The components provide a consistent look and feel across different
platforms, making the apps more user-friendly and visually appealing.
• Improved Coding Experience: Using community-developed UI components helps
you onboard experienced contributions from a wide sphere into your react native
app project.
Implementation:
import React, {useState} from 'react';
{/* import { StatusBar } from 'expo-status-bar'; */}
import { KeyboardAvoidingView, StyleSheet, Text, TextInput, TouchableOpacity, View,
Keyboard, ScrollView } from 'react-native';
import Task from './components/Task';

export default function App() {

const [task, setTask] = useState();
const [taskItems, setTaskItems] = useState([]);

const handleAddTask = () => {

Keyboard.dismiss();
setTaskItems([...taskItems, task])
setTask(null);
}

const completeTask = (index) => {

let itemsCopy = [...taskItems];
itemsCopy.splice(index, 1);
setTaskItems(itemsCopy);
}

return (
<View style={styles.container}>
{/* Added this scroll view to enable scrolling when list gets longer than the page */}
<ScrollView
contentContainerStyle={{
flexGrow: 1
 }}
keyboardShouldPersistTaps='handled'
>

{/* todays task */}

<View style={styles.tasksWrapper}>
<Text style={styles.sectionTitle}>Today's Task</Text>

<View style={styles.items}>
{/* This is where the tasks will go */}
{
taskItems.map((item, index) => {
return (
<TouchableOpacity key={index} onPress={() => completeTask(index)}>
<Task text={item} />
</TouchableOpacity>

)
{/* <Task key={index} text={item} /> */}
})
}
{/* <Task text={'Task 1'}/>
<Task text={'Task 2'}/> */}
</View>

</View>
</ScrollView>
 {/* Write a task */}
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={styles.writeTaskWrapper}
>
<TextInput style={styles.input} placeholder={'Write a task'} value={task}
onChangeText={text => setTask(text)} />

<TouchableOpacity onPress={() => handleAddTask()}>

<View style={styles.addWrapper}>
<Text style={styles.addText}>+</Text>
</View>
</TouchableOpacity>

</KeyboardAvoidingView>

</View>
);
}
Output:

Conclusion:
In these experiment we have learn the use various components in the React
Native and tried to implement the component in our project. Adding user
interactivity to a React Native application involves using various built-in React
Native components, state management, and handling user input events.