Giter VIP home page Giter VIP logo

react-native-animated-todo's Introduction

Smoothly Animated ToDo App built with React Native

Thumbnail

Try the demo on Expo Go

The animated checkbox component has been published as an NPM module react-native-checkbox-reanimated.

demo

Tutorial

Watch how I built this website on YouTube:

Stack

Project structure

$PROJECT_ROOT
├── App.tsx        # Entry point
└── src
    ├── screens    # Screen components
    ├── components # UI components
    ├── utils      # Custom hooks and helpers
    └── assets     # Image files

Credits

How to dev

This project can be run from the Expo client app.

yarn
yarn start

Looking for a Markdown note-taking app? Check out my app called Inkdrop:

Inkdrop

react-native-animated-todo's People

Contributors

craftzdog avatar michaelessiet avatar neugomonov avatar vipulbhj avatar

Stargazers

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

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-native-animated-todo's Issues

Yarn.lock & package-lock.json preventing the attempt to run the app

Describe the bug
The updates @michaelessiet made in the package are cool and all, but the newly added lock files from #10 are messing up the initial android build.
I had to remove them both (Yarn.lock & package-lock.json) and reinstall the dependencies (using yarn command, surely) with a new autogenerated yarn-lock file in order to get the project to run (on android 🤖).
After that the yarn android command worked flawlessly.
With the files offered by @michaelessiet it was giving me the error below.

To Reproduce
Steps to reproduce the behavior:

  1. Clone the repo
  2. Try to run the app: yarn && yarn android
  3. After bundling is complete, see the error:
 ERROR  TypeError: _reactNativeReanimated.Easing.bezier(0.16, 1, 0.3, 1) is not a function. (In '_reactNativeReanimated.Easing.bezier(0.16, 1, 0.3, 1)(progress.value)', '_reactNativeReanimated.Easing.bezier(0.16, 1, 0.3, 1)' is 
an instance of Object)

This error is located at:
    in AnimatedCheckbox (created by TaskItem)
    in RCTView (created by View)
    in View (created by Pressable)

Expected behavior
No error 🐛

Screenshots
error log

Desktop (please complete the following information):

  • OS: [Windows 10]

Smartphone (please complete the following information):

  • Device: [Android Emulator]
  • OS: [Android 11]

Additional context
#7 could be related, so dear @kokosky93, if you're still confused by the error you received, maybe try deleting the lock files, then run yarn or npm i. It could help. :)

Not able to run the application

Hi,

I am not able to run the application

OS: Windows 10
Android

When I follow your instructions: yarn and yarn start I see following error:

Error: If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation
This error is located at:
in AnimatedColorBox (created by MainScreen)

I also tried by npm install and then I see following error:
TypeError: ReanimatedModule.installTurboModule is not a function

There is an issue with react-native-reanimated package.
I have been trying everything that come to my mind and It doesn't work for me.

Any help is much appreciated.

Thanks in advance!

The animated checkbox from npm doesn't animate

I installed the npm package the other day and tried it out. I started getting some error from reanimated that ('Tried to synchronously call anonymous function from a different thread.'). Is there a fix for this ?

Data not saved

Hello I'm a beginner
How can I make the task data and the dark light mode saved in internal storage?

No Navigator file.

In the current App.tsx file, there’s this

import React from "react";
import AppContainer from "./src/components/app-container";
import Navigator from "./src/";

export default function App() {
  return (
    <AppContainer>
      <Navigator />
    </AppContainer>
  );
}

On line 3 where we have to import Navigator, the file doesn't actually exist in the ./src/ directory. Was it a syntactical error, or missing file in the right repository, or I’m I missing my head for once, or all at the same time?
Grateful for the help!

Task input field broken after #1

Haptic typing bug found in android testing!!!

When I try to put input in the tasks area, after every letter input back button is automatically working and we have to retype it. Like system freezing.

Missing package "metro" in the project...

I checked out the project and tried to run it, to no avail:

% yarn start
Starting project at /Users/***/Projects/react-native-animated-todo
Developer tools running on http://localhost:19002
Opening developer tools in the browser...
Some dependencies are incompatible with the installed expo package version:
 - react-native-reanimated - expected version: ~2.2.0 - actual version installed: 2.3.1
 - react-native-screens - expected version: ~3.8.0 - actual version installed: 3.10.1
 - react-native-svg - expected version: 12.1.1 - actual version installed: 12.2.0
Your project may not work correctly until you install the correct versions of the packages.
To install the correct versions of these packages, please run: expo install [package-name ...]
Missing package "metro" in the project at: /Users/***/Projects/react-native-animated-todo
This usually means `react-native` is not installed. Please verify that dependencies in package.json include "react-native" and run `yarn` or `npm install`.
Error: Missing package "metro" in the project at: /Users/***/Projects/react-native-animated-todo
This usually means `react-native` is not installed. Please verify that dependencies in package.json include "react-native" and run `yarn` or `npm install`.
    at resolveFromProject (/usr/local/lib/node_modules/expo-cli/node_modules/@expo/dev-server/src/metro/importMetroFromProject.ts:21:11)
    at importFromProject (/usr/local/lib/node_modules/expo-cli/node_modules/@expo/dev-server/src/metro/importMetroFromProject.ts:27:18)
    at Object.importMetroFromProject (/usr/local/lib/node_modules/expo-cli/node_modules/@expo/dev-server/src/metro/importMetroFromProject.ts:41:10)
    at runMetroDevServerAsync (/usr/local/lib/node_modules/expo-cli/node_modules/@expo/dev-server/src/MetroDevServer.ts:80:17)
    at startDevServerAsync (/usr/local/lib/node_modules/expo-cli/node_modules/xdl/src/start/startDevServerAsync.ts:77:55)
    at startAsync (/usr/local/lib/node_modules/expo-cli/node_modules/xdl/src/start/startAsync.ts:73:41)
% npm -v
8.1.2
% node -v
v16.13.1
% expo --version
5.0.1

TypeError: Cannot convert undefined or null to object

after to run application yarn start and select mobile option it works, but after to test
yarn web, I get an error
TypeError: Cannot convert undefined or null to object useAnimatedStyle node_modules/react-native-reanimated/lib/reanimated2/Hooks.js:332

Archlinux base
node v12

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.