CSS Positioning

Vishesh Kumar — Thu, 14 Oct 2021 06:47:38 +0000

In CSS Positioning of elements is very important topic. CSS having five type of Positioning method

1. static
2. relative
3. fixid
4. absolute
5. sticky

Static

default form of HTML
Do not have any specific styling
We can not use top, bottom, left, right with static positioning

relative

Give affect relative to its normal position.
Normally No element can occupy its position.

Fixed

give affect relative to view port.
It always occupy the same place unless page is scroll.
top, bottom, left, right can be used with it
Normally other element occupy blank space which it left

Absolute

relative to the nearest positioned ancestor(instead of positioned relative to the viewport, like fixed).
It move along the scroll
if there are no ancestor exits it used document body
space left by element is fulfilled by another element.

Sticky

position based on the scroll
element toggle between relative and fixed
Element perform like relative property until viewport does not match then perform as fixed

All the positioning property is applied as:

.className or #Id or tag {
positon: ProperyName; fixed);
}
PropertyName: static OR relative OR absolute OR sticky

Thanks for Reading...

By Tech 9-on

Complete React Native one View

Vishesh Kumar — Tue, 13 Jul 2021 01:54:50 +0000

React Native is a great javaScript library in which we can make android, ios mobile app with a single code base. Here i will explain all the basic concept for learning react native. This will be a brief introduction of all the topics of react native.

Install of React-native-cli

first we will see how we can install the react-native in your system. We will work react-native-cli in the whole article.

npm install -g expo-cli

Create React Native App

expo init firstProject

Run React Native App

expo start

Basic Components of react Native

Here we will describe some of the basics components of react native like View, Text, Image, TextInput, ScrollView, StyleSheet

View
View in react native is div like tag. View is the fundamental component for building UI. View is the container that supports layout with flexbox, style, touch handling and accessibility.

import React from "react";
import { View, Text } from "react-native";

const ViewShow = () => {
  return (
    <View>
      <View>
      <Text>Box One</Text>
      </View>
      <View ><Text>Hello World!</Text></View>

    </View>
  );
};

export default ViewShow;

Text
Text support nesting, styling, and touch handling. text show the written content on the app.

return (
    <View>

      <Text>welcome to stupid Progrmmer </Text>
      <Text>Thanks for reading </Text>

    </View>
  );

Image
In react native we can show image with the help of uri & require
uri -> for url
require -> for system image

return(
<View>
<Image source = {{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400t.png'}}
   style = {{ width: 200, height: 200 }}
   />
<Image source = {require('C:/Users/MyDir/Desktop/NativeImage/logo.png')} />
</View>
);

TextInput
React Native provide well defined method to take text as an input through touchable keypad.

import React from "react";
import { SafeAreaView, StyleSheet, TextInput } from "react-native";

const TextInputExample = () => {
  const [text, onChangeText] = React.useState("Useless Text");


  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
        placeholder="write some text"
      />

    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
  },
});

export default TextInputExample;