Skip to content

README.md

Latest commit

 

History

History
124 lines (82 loc) · 2.1 KB

README.md

File metadata and controls

124 lines (82 loc) · 2.1 KB

React Native Tools

A collection of reusable React Native components and animated text effects built with Expo.

Components

This project includes various ready-to-use components that you can integrate into your React Native applications:

UI Components

Turkey Map SVG

<TurkeyMap
   width={width}
   height={(width * 422) / 1000}
   selectedProvinceId={selectedProvinceId}
   onProvincePress={setSelectedProvinceId}
   style={{width: '100%', height: 'auto'}}
/>

Turkey Map SVG

svg source

Quick Menu Button

<QuickMenuButton buttonColor={"#000000"} itemColor={"#919191"} />

quick menu button

Animated Slider

<AnimatedSlider initialPosition={50} />

animated slider

QR Animation

<QrAnimation />

qr animation

Image Gallery

<Gallery
   images={[
      {
      id: 1,
      image:
         "https://cdn.pixabay.com/photo/2023/05/01/18/06/windmill-7963566_1280.jpg",
      alt: "photo 1",
      },
   ]}
/>

image gallery

Animated Text Effects

Wave Effect

wave

Moving Effect

moving

Magnifying Effect

magnifying

Randomized Effect

randomized

Shining Effect

shining

Sliding Effect

sliding

Getting Started

  1. Install dependencies

    npm install

  2. Start the app

    npx expo start

Project Structure

app/                    # Demo screens for each component
components/             # Reusable components
  ├── animatedText/     # Text animation effects
  ├── AnimatedSlider.tsx
  ├── QuickMenuButton.tsx
  ├── QrAnimation.tsx
  └── turkeyMap/        # Turkey map components

Technologies

  • React Native
  • Expo
  • TypeScript