rn-harold-test

"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 rn-harold-test

Or if you prefer using Yarn:

yarn add rn-harold-test

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 'rn-harold-test'

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 'rn-harold-test'

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 😎

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