Code Monkey home page Code Monkey logo

react-native-custom's Introduction

React Native Custom

Is this ?

My creation custom react native open source for custom

Preview

How to Use

Git clone

https://github.com/andikscript/react-native-custom.git

And you can use this component by calling the name component directly in the core component.

how to call activity indicator model dna :

<Dna
  size={50}
  colorFirst={"red"}
  colorSecond={"blue"}
  transisition={"yellow"}
/>

how to call snake model activity indicator :

<Snake 
  colorFirst={"blue"}
  colorSecond={"red"}
  transisition={"yellow"}
/>

how to call activity indicator custom color :

<CustomColor
  activity={true}
  colorFirst={'red'}
  colorSeccond={'blue'}
  colorThird={'green'}
/>

how to call Floating Button :

<FloatingButton />

how to call Search Realtime :

<Search data={dataShow} />

For custom "dataShow" you can change file on "/components/Search/Data.js"

how to call Search Realtime :

<MultipleChoice />

For custom "question" you can change file on "/components/MultipleChoice/Question.js"

how to call BlurEffect Background :

<BlurEffectBackground color={'#fff'} />

For custom color you can change hexcode color on color={}

how to call Bounce Image Animated :

<BounceImage uri="https://cdn.kibrispdr.org/data/pin-map-png-0.png" />
<BounceImage image={require('./src/image/bounce.jpg')} />

how to call Slide Window :

<SlideWindow />

For custom component on Slide Window you can edit on file "./components/SlideWindows.js" on Flatlist in Animated.View

how to call Slide Show :

<SlideShow data={dataSlide} />

For custom image you can change data json format on "./component/SlideShow/data.js"

how to call Scroll Campaign :

<ScrollCampaign 
  data={data} 
  distance={75} 
  size={250} 
/>

For custom data you can change file data.js on "./components/ScrollCampaign/data"

  • props "distance" to use determine distance margin left of scroll campaign
  • and props "size" to use determine the height and width of the scroll campaign

how to call Scroll Campaign :

<HeaderFolding />

For modification you can change file HeaderFolding.js "./components/HeaderFolding/HeaderFolding"

how to call Floating Button Scroll :

<FloatingButtonScroll />

how to call Header Window Scroll :

<HeaderWindowScroll />

how to call Header Window Scroll :

<LoadingType sizeLoading={15} />

For determine size you can change value on sizeLoading={}

how to call Header Window Scroll :

<AnimationTextWelcome 
  title={'Hi'} 
  body={'Andik Script'} 
/>

For modification text title and body you can change on props title={''} and body={''}

how to call Header Window Scroll :

<FloatingButtonAnimated 
  buttonFirst={'twitter'}
  buttonSecond={'github'}
  buttonThird={'reddit'}
/>

For modification button you can change props buttonFirst={''}, buttonSecond={''}, buttonThird={''}

how to call Overflow Menu :

<OverflowMenu />

For modification menu you can add row or change name and icon on file ./components/OverflowMenu/OverflowMenu

how to call Header Image Folding :

<HeaderImageFolding 
  image={'https://tinyurl.com/3aubksna'} 
/>

For modification image you can change link url image on props image={ }

how to call Notification Animated :

<NotifAnimated 
  textNotif={'This is notification'}
/> 

For modification text on props textNotif={ }

how to call Zoom Animated :

<ZoomImage
  src={
    'https://s.kaskus.id/r540x540/images/2020/08/01/10900683_20200801104758.jpg'
  }
/>

For modification image can change on props src={ }

how to call Zoom Animated :

<TypeAndLoading />

For modification loading you can change row 56 => <LoadingType sizeLoading={5} colorLoading={'white'} />, at file

License

MIT License

Copyright (c) 2021 andikscript

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

react-native-custom's People

Contributors

andikscript avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

react-native-custom's Issues

Error Running

Why does it get an error when it runs even though I've written the component?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.