Experiment No 4

Aim:
Basic user interface design using react components, Stylesheet, Flexbox and XAML,
manipulation of components using States and Props.

Theory:
React Components:
A Component is considered as the core building blocks of a React application. It makes the
task of building UIs much easier. Each component exists in the same space, but they work
independently from one another and merge all in a parent component, which will be the
final UI of your application.
Every React component have their own structure, methods as well as APIs. They can be
reusable as per your need. For better understanding, consider the entire UI as a tree. Here,
the root is the starting component, and each of the other pieces becomes branches, which
are further divided into sub-branches.
Stylesheet:
React Native stylesheets are used to define the visual appearance and layout of components
in a React Native application. Stylesheets allow you to define styles for components using a
syntax that is similar to CSS, but with some differences. In React Native, styles are defined as
JavaScript objects that contain properties and values that describe the visual appearance of
a component. These properties can include things like color, font size, padding, margin,
border, and more.
Flexbox:
The flexbox adds the style to the component in a primary axis of its layout. It has a property
row and column to organize children horizontally and vertically respectively.
The default flexDirection is a column.
State and Props:
The state is an updatable structure that is used to contain data or information about the
component and can change over time. The change in state can happen as a response to user
action or system event. It is the heart of the react component which determines the
behavior of the component and how it will render. A state must be kept as simple as
possible. It represents the component's local state or information. It can only be accessed or
modified inside the component or by the component directly. Props are read-only
components. It is an object which stores the value of attributes of a tag and work similar to
the HTML attributes. It allows passing data from one component to other components. It is
similar to function arguments and can be passed to the component the same way as
arguments passed in a function. Props are immutable so we cannot modify the props from
inside the component
Implementation:
Stylesheet for app.js
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#E8EAED',
},
tasksWrapper: {
paddingTop: 80,
paddingHorizontal: 20,
},
sectionTitle: {
fontSize: 24,
fontWeight: 'bold'
},
items: {
marginTop: 30,
},
writeTaskWrapper:{
position: 'absolute',
bottom: 60,
width: '100%',
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
},
 input:{
paddingVertical: 15,
paddingHorizontal: 15,
backgroundColor: '#FFF',
borderRadius: 60,
borderColor: '#C0C0C0',
borderWidth: 1,
width: 250,
},
addWrapper: {
width: 60,
height: 60,
backgroundColor: '#FFF',
borderRadius: 60,
justifyContent: 'center',
alignItems: 'center',
borderColor: '#C0C0C0',
borderWidth: 1,
},
addText: {},
});
Stylesheet for task.js
const styles = StyleSheet.create({
item: {
backgroundColor: '#FFF',
padding: 15,
 borderRadius: 10,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 20,
},
itemLeft: {
flexDirection: 'row',
alignItems: 'center',
flexWrap: 'wrap',
},
square: {
width: 24,
height: 24,
backgroundColor: '#55BCF6',
opacity: 0.4,
borderRadius: 5,
marginRight: 15,
},
itemText: {
maxWidth: '80%',
},
circular: {
width: 12,
height: 12,
borderColor: '#55BCF6',
 borderWidth: 2,
borderRadius: 5,
},

});
export default Task;
Output:
Conclusion:
React Native uses a flexible box layout model, also known as flexbox, to define the layout and
positioning of components in a mobile app. React State and Props are two fundamental concepts in
React and React Native that are used to manage data and the rendering of components.