trying reanimated 2

This commit is contained in:
austinried 2021-06-22 11:03:26 +09:00
parent 41d78f0d2f
commit 5e4578d8e8
7 changed files with 28 additions and 14 deletions

View File

@ -78,7 +78,7 @@ import com.android.build.OutputFile
*/
project.ext.react = [
enableHermes: false, // clean and rebuild if changing
enableHermes: true, // clean and rebuild if changing
]
apply from: "../../node_modules/react-native/react.gradle"

View File

@ -12,6 +12,10 @@ import com.facebook.soloader.SoLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
// for reanimated
import com.facebook.react.bridge.JSIModulePackage;
import com.swmansion.reanimated.ReanimatedJSIModulePackage;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost =
@ -34,6 +38,12 @@ public class MainApplication extends Application implements ReactApplication {
protected String getJSMainModuleName() {
return "index";
}
// for reanimated
@Override
protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage();
}
};
@Override

View File

@ -1,3 +1,7 @@
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
// reanimated has to be listed last in plugins
'react-native-reanimated/plugin',
],
};

14
package-lock.json generated
View File

@ -20,7 +20,7 @@
"react-native-gesture-handler": "^1.10.3",
"react-native-get-random-values": "^1.7.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-reanimated": "^2.2.0",
"react-native-reanimated": "^2.0.0",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.4.0",
"react-native-sqlite-storage": "^5.0.0",
@ -11539,9 +11539,9 @@
}
},
"node_modules/react-native-reanimated": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.2.0.tgz",
"integrity": "sha512-lOJDd+5w1gY6DHGXG2jD1dsjzQmXQ2699HUc3IztvI2WP4zUT+UAA+zSG+5JiBS5DUnTL8YhhkmUQmr1KNGO5w==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.0.0.tgz",
"integrity": "sha512-kIrdBoXSky7DQ62SOgosgimKM+Lt+SzAaM+ovVpCLBcwUK2aYRfLxa9ffgvKjeH9/n7dONlwEMjbKssGkuyq2Q==",
"dependencies": {
"@babel/plugin-transform-object-assign": "^7.10.4",
"fbjs": "^3.0.0",
@ -23413,9 +23413,9 @@
"requires": {}
},
"react-native-reanimated": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.2.0.tgz",
"integrity": "sha512-lOJDd+5w1gY6DHGXG2jD1dsjzQmXQ2699HUc3IztvI2WP4zUT+UAA+zSG+5JiBS5DUnTL8YhhkmUQmr1KNGO5w==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.0.0.tgz",
"integrity": "sha512-kIrdBoXSky7DQ62SOgosgimKM+Lt+SzAaM+ovVpCLBcwUK2aYRfLxa9ffgvKjeH9/n7dONlwEMjbKssGkuyq2Q==",
"requires": {
"@babel/plugin-transform-object-assign": "^7.10.4",
"fbjs": "^3.0.0",

View File

@ -22,7 +22,7 @@
"react-native-gesture-handler": "^1.10.3",
"react-native-get-random-values": "^1.7.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-reanimated": "^2.2.0",
"react-native-reanimated": "^2.0.0",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.4.0",
"react-native-sqlite-storage": "^5.0.0",

View File

@ -9,8 +9,8 @@ const TopTabBar: React.FC<MaterialTopTabBarProps> = ({ state, descriptors }) =>
<View style={{
backgroundColor: colors.gradient.high,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-evenly',
alignItems: 'flex-start',
justifyContent: 'flex-start',
}}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];

View File

@ -57,7 +57,7 @@ const AlbumItem: React.FC<{ id: string } > = ({ id }) => {
// console.log(album.name);
// });
const size = 180;
const size = 125;
return (
<View style={{
@ -66,7 +66,7 @@ const AlbumItem: React.FC<{ id: string } > = ({ id }) => {
marginVertical: 10,
// marginLeft: 6,
// width: size,
flex: 1/2,
flex: 1/3,
}}>
<AlbumArt
width={size}
@ -136,7 +136,7 @@ const AlbumsList = () => {
keyExtractor={item => item}
onRefresh={refresh}
refreshing={refreshing}
numColumns={2}
numColumns={3}
removeClippedSubviews={false}
/>
</View>