A basic setup for React Native applications.

Installation

To install this package, run the following command:

npm install @karthickumarelumalai/rn-basic-setup

Components

This package includes the following components:

CustomButton:

import React from 'react';
import { CustomButton } from '@karthickumarelumalai/rn-basic-setup';

const App = () => {
  return (
    <View>
      <CustomButton text="Click me!" onPress={() => console.log('Button pressed!')} />
    </View>
  );
};

CustomImage:

import React from 'react';
import { CustomImage } from '@karthickumarelumalai/rn-basic-setup';

const App = () => {
  return (
    <View>
      <CustomImage source={{ uri: 'https://example.com/image.jpg' }} style={{ width: 100, height: 100 }} />
    </View>
  );
};

CustomInput:

import React, { useState } from 'react';
import { CustomInput } from '@karthickumarelumalai/rn-basic-setup';

const App = () => {
  const [text, setText] = useState('');

  return (
    <View>
      <CustomInput
        placeholder="Enter some text"
        value={text}
        onChangeText={(text) => setText(text)}
        style={{ width: 200, height: 40 }}
      />
    </View>
  );
};

CustomText:

import React from 'react';
import { CustomText } from '@karthickumarelumalai/rn-basic-setup';

const App = () => {
  return (
    <View>
      <CustomText text="Hello, world!" style={{ fontSize: 24, color: 'blue' }} />
    </View>
  );
};

CustomFlatList:

import React from 'react';
import { CustomFlatList } from '@karthickumarelumalai/rn-basic-setup';

const App = () => {
  const data = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <View>
      <CustomFlatList
        data={data}
        renderItem={({ item }) => <CustomText text={item} />}
        style={{ width: 200, height: 200 }}
      />
    </View>
  );
};

CustomRadioButton:

import React, { useState } from 'react';
import { CustomRadioButton } from '@karthickumarelumalai/rn-basic-setup';

const App = () => {
  const [selected, setSelected] = useState(false);

  return (
    <View>
      <CustomRadioButton
        selected={selected}
        onPress={() => setSelected(!selected)}
        style={{ width: 20, height: 20 }}
      />
    </View>
  );
};

CustomLoadingScreen:

import React, { useState } from 'react';
import { CustomLoadingScreen } from '@karthickumarelumalai/rn-basic-setup';

const App = () => {
  const [visible, setVisible] = useState(true);

  return (
    <View>
      <CustomLoadingScreen visible={visible} style={{ width: 200, height: 200 }} />
    </View>
  );
};

CustomApi: Created using Axios getRequest and postRequest

// Example of a GET request

const getData = async () => {
    try {
      const response = await getRequest("YOUR BASE URL","END POINT");
      console.log("Get Response:",response)
    } catch (error) {
      console.error(error);
    } 
  };

// Example of a POST request

const postData = async () => {
    const payload = { key: "value" }; // Your payload data
    try {
      const response = await postRequest("YOUR BASE URL","END POINT", payload);
      console.log("Post Response:", response);
    } catch (error) {
      console.error(error);
    } 
  };

Author

Karthic_Kumar_Elumalai

Github

https://github.com/Karthickumar1006/react-native-custom-components