search

gitim / react-native-sortable-list

React Native Sortable List component
MIT License
884 stars 279 forks source link

Can anyone help? #236

Open thegirlyoucallryan opened 2 years ago

thegirlyoucallryan commented 2 years ago

import { useEffect } from 'react'; import { Text, StyleSheet, Animated, Platform, Easing,} from 'react-native';

const RowAnimate = props => {

const {data, _active} = props;

useEffect(() => {
    if (props._active !== nextProps._active) {
        Animated.timing(_active, {
          duration: 300,
          easing: Easing.bounce,
          toValue: Number(nextProps._active),
        }).start();
      }

},[nextProps])

return(
    <Animated.View style={[
        styles.animationStyle,
      ]}>

        <Text >{data.name}</Text>
      </Animated.View>

)

};

const styles = StyleSheet.create({ animationStyle : { ...Platform.select({ ios: { transform: [{ scale: this._active.interpolate({ inputRange: [0, 1], outputRange: [1, 1.1], }), }], shadowRadius: this._active.interpolate({ inputRange: [0, 1], outputRange: [2, 10], }), },

      android: {
        transform: [{
          scale: this._active.interpolate({
            inputRange: [0, 1],
            outputRange: [1, 1.07],
          }),
        }],
        elevation: this._active.interpolate({
          inputRange: [0, 1],
          outputRange: [2, 6],
        }),
      },
    })
  }

});

export default RowAnimate;

import { Animated, Easing, Dimensions, Platform, } from 'react-native'; import RowAnimate from '../components/Row';

const window = Dimensions.get('window');

const FavoritesScreen = props => { const favorites = useSelector(state => state.favorites.favoritedExercises);

  const _active = new Animated.Value(0);

 const WorkoutRenderHandler = ({favorites, _active}) => {
    return(
     <RowAnimate data={favorites} active={_active} />
    )

};

return ( 

      <View>
           <SortableList
            style={styles.screen}
            contentContainerStyle={styles.contentContainer}
            data={favorites}
            renderRow={WorkoutRenderHandler} 
            />

)

};

errors:::

TypeError: undefined is not an object (evaluating 'this._active.interpolate') at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl at node_modules\react-native\Libraries\LogBox\LogBox.js:34:4 in console.error at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException at node_modules\react-native\Libraries\Core\ExceptionsManager.js:172:19 in handleException at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError at node_modules\@react-native\polyfills\error-guard.js:49:36 in ErrorUtils.reportFatalError at node_modules\metro-runtime\src\polyfills\require.js:204:6 in guardedLoadModule at http://192.168.1.15:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:295266:3 in global code

Invariant Violation: "main" has not been registered. This can happen if:

thegirlyoucallryan commented 2 years ago

import { AppRegistry } from 'react-native'; import App from './App';

AppRegistry.registerComponent('fitness', () => App);

i created an index.js file in the root directory and added this. but no go... my app.json file:

{ "expo": { "name": "fitness", "slug": "fitness", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" },

"updates": {
  "fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
  "**/*"
],
"ios": {
  "supportsTablet": true
},
"android": {
  "adaptiveIcon": {
    "foregroundImage": "./assets/adaptive-icon.png",
    "backgroundColor": "#FFFFFF"
  }
},
"web": {
  "favicon": "./assets/favicon.png"
}

} }

YCMitch commented 2 years ago

Honestly I think this package is abandoned now unfortunately. You may have better luck with this one: https://www.npmjs.com/package/advanced-react-native-sortable-list