react-native-jescon

"React Native Package for Custom Components & Functions"

Prerequisites

This project requires NodeJS (version 8 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
6.4.1
v8.16.0

Table of contents

• Project Name
  • Prerequisites
  • Table of contents
  • Getting Started
  • Installation
  • Usage
    • Serving the app
    • Running the tests
    • Building a distribution version
    • Serving the distribution version
  • API
    • useBasicFetch
      • Options
    • fetchData
  • Contributing
  • Credits
  • Built With
  • Versioning
  • Authors
  • License

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installation

BEFORE YOU INSTALL: please read the prerequisites

To install and set up the library, run:

npm i react-native-jescon

Or if you prefer using Yarn:

yarn add react-native-jescon

Usage

Serving the app

react-native run-android

Running the tests

npm test

Building a distribution version on Android App

./gradlew assembleRelease

This task will create a apk distribution version of the project inside your local android/app/build/outputs/release folder

Serving the distribution version on Ios Machine

react-native run-ios

API

Use Components

import { CContainerView, CDetailView, normalize, Icon, CSliderMenu } from 'react-native-jescon'

Supported options and result fields for the Components are listed below.

Options

props

| Type | Default value | | --- | --- | | string | '' |

If present, the request will be performed as soon as the component is mounted

Example:

import React,{useState} from 'react';
import { Text, View } from 'react-native';
import { CContainerView, CDetailView, normalize, Icon, CSliderMenu,NetworkServiceCall  } from 'react-native-jescon'

const Test = () => {
  const [isShowSlidermenu, setIsShowSlidermenu] = useState(false);
  var optionData = [
    { optionname: 'Home',key:1,iconname:"home",navigation:"Dashboard" },
    { optionname: 'Location',key:2,iconname:"search-location" ,navigation:"Home"},
    { optionname: 'Video Call',key:3 ,iconname:"video",navigation:"Login"},
    { optionname: 'Precription Report',key:4,iconname:"key",navigation:"Dashboard" },
];

  return (
    <CContainerView>
      <Icon.FontAwesome5 name={'home'} color="red" size={normalize(30)} onPress={()=>setIsShowSlidermenu(true)}/>
      <Text style={{ color: 'white', fontSize: normalize(30) }}>11111</Text>
      <CDetailView>
        <Text>HHHH</Text>
      </CDetailView>
      {isShowSlidermenu ?
        <CSliderMenu
          navigation={props.navigation}
          optionArray={optionData}
          isShow={isShowSlidermenu}
          visibility={(val) => (val == undefined ? null : setIsShowSlidermenu(val))}
        /> : null}
    </CContainerView>
  )
}
export default Test;

delay

| Type | Default value | Description | | --- | --- | --- | | number | 0 | Time in milliseconds |

If present, the request will be delayed by the given amount of time

Example:

type Joke = {
  value: {
    id: number;
    joke: string;
  };
};

const MyComponent: React.FC = () => {
  const { data, error, loading } = useBasicFetch<Joke>('https://api.icndb.com/jokes/random', 2000);

  if (error) {
    return <p>Error</p>;
  }

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div className="App">
      <h2>Chuck Norris Joke of the day</h2>
      {data && data.value && <p>{data.value.joke}</p>}
    </div>
  );
};

fetchData

fetchData(url: string)

Perform an asynchronous http request against a given url

type Joke = {
  value: {
    id: number;
    joke: string;
  };
};

const ChuckNorrisJokes: React.FC = () => {
  const { data, fetchData, error, loading } = useBasicFetch<Joke>();
  const [jokeId, setJokeId] = useState(1);

  useEffect(() => {
    fetchData(`https://api.icndb.com/jokes/${jokeId}`);
  }, [jokeId, fetchData]);

  const handleNext = () => setJokeId(jokeId + 1);

  if (error) {
    return <p>Error</p>;
  }

  const jokeData = data && data.value;

  return (
    <div className="Comments">
      {loading && <p>Loading...</p>}
      {!loading && jokeData && (
        <div>
          <p>Joke ID: {jokeData.id}</p>
          <p>{jokeData.joke}</p>
        </div>
      )}
      {!loading && jokeData && !jokeData.joke && <p>{jokeData}</p>}
      <button disabled={loading} onClick={handleNext}>
        Next Joke
      </button>
    </div>
  );
};

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Add your changes: git add .
4. Commit your changes: git commit -am 'Add some feature'
5. Push to the branch: git push origin my-new-feature
6. Submit a pull request :sunglasses:

Credits

TODO: Write credits

Built With

• Dropwizard - Bla bla bla
• Maven - Maybe
• Atom - ergaerga
• Love

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• John Doe - Initial work - JohnDoe

See also the list of contributors who participated in this project.

License

MIT License © Andrea SonnY