Experiment No 6

Aim:
Integrating third party components into our application and XAML pages using
shared resources.
Theory:
React Native provides a set of built-in components that you can use to build
your mobile applications. However, sometimes these built-in components may
not meet your specific needs or requirements, and you may need to use third-
party components to enhance the functionality and appearance of your app.
There are many third-party component libraries available for React Native, and
they offer a wide range of functionalities, from UI components to integrations
with various services and APIs.
To use third-party components in your React Native application, you can follow
these steps, Install the library: You can install a third-party library using a
package manager such as npm or yarn. Import the component: Once the
library is installed, you can import the component you want to use in your
application. Use the component: You can use the imported component in your
application by adding it to your JSX code. You can create a new CSS file in your
project directory and add your CSS inside it. You can then import the file in
your component, class, or React JS page. Inline CSS is probably the most
common and quickest out of the three methods to add CSS to a React app.
However, it has many disadvantages and is generally discouraged to use unless
you have a very small application. We create an object that contains different
references, which we then call with the style{} attribute. Styled components let
you write actual CSS in your JavaScript. The main advantage is that you can add
conditional code and use variables and functions within the CSS. The third
party Library provides the native app features which are not available in React
Native features. If we refer to React Native documentation, there are lots of
features that are not available (such as maps). Due to this, we need to add
third party libraries in our project. In this tutorial, we would learn how to add
the third parties libraries in our app (adding third party icons). There are
different sets of bundled Icon available. Some of them are listed below:
o AntDesign
o Entypo
 o EvilIcons
o Feather

Implementation:
import React from 'react';
import { View, Text, StyleSheet, TextBase, TouchableOpacity } from 'react-
native';

const Task = (props) => {

return (
<View style={styles.item}>
<View style={styles.itemLeft }>
<View style={styles.square}></View>
<Text style={styles.itemText}>{props.text}</Text>
</View>
<View Style={styles.circular}></View>
</View>
)
}
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 React Native, third-party components are components that are not built-in
to the React Native framework and need to be installed separately as
dependencies.They can save development time and effort by providing pre-
built functionality that would otherwise need to be implemented from scratch.