I am new to react native and was trying to play with Moti animations, I am not sure why the animations are not getting loaded, the code is :
import { MotiView, MotiText } from "moti"
import React, { useState, useEffect } from "react";
import { View } from 'react-native';
export default function App() {
return (
<View>
<Text>Hello world</Text>
<MotiView
from={{ opacity: 0, scale: 0.5 }}
animate={{ opacity: 1, scale: 1 }}
transition={{
// default settings for all style values
type: 'timing',
duration: 350,
// set a custom transition for scale
scale: {
type: 'spring',
delay: 100,
},
}}
/>
</View>
)
}
In above code the text "hello world" is displayed, but the motiview is not getting displayed.
babel.config.js file looks like this
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin']
};
};
package.json versions:
"react-native-reanimated": "~2.9.1",
"moti": "^0.21.0",
Need some help, can anyone tell where I am going wrong.
The style property was missing from MotiView properties, we need to set width and height of the view.
Related
This is my current image picker function
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.images,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
})
console.log(result)
if (!result.cancelled) {
setImage(result.uri)
}
}
I am trying to make the pop-up gallery dark-themed. How do I do that?
React Navigation has a Theme component that would be perfect for this! You can use their default theme, or customize it however you want! Check out details here.
Adding a theme to your project is actually super easy. Assuming you're already using React-Navigation, then you don't even need to download an additional dependency.
Create a new .js file called whatever you want, typical name would be theme.js. Inside paste this:
import * as React from 'react';
import { NavigationContainer, DefaultTheme } from '#react-navigation/native';
const MyTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
primary: 'rgb(255, 45, 85)',
},
};
This theme component has a whole bunch of props to choose from so make sure to check it out.
Here is an example from the docs:
const MyTheme = {
dark: false,
colors: {
primary: 'rgb(255, 45, 85)',
background: 'rgb(242, 242, 242)',
card: 'rgb(255, 255, 255)',
text: 'rgb(28, 28, 30)',
border: 'rgb(199, 199, 204)',
notification: 'rgb(255, 69, 58)',
},
};
Now for the dark mode portion, React-Navigation has built in themes, default and dark: import { DefaultTheme, DarkTheme } from '#react-navigation/native';
Inside your navigation container, now all you have to do is call the theme you'd like to use:
import { useColorScheme } from 'react-native';
import {
NavigationContainer,
DefaultTheme,
DarkTheme,
} from '#react-navigation/native';
export default () => {
const scheme = useColorScheme();
return (
<NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
{/* content */}
</NavigationContainer>
);
};
This is a great rudimentary way to get start with light and dark themes. Once you get the hang of it, you can implement State as well to make your app toggle between default and dark mode!
Trying to make a spinner with Moti but having some issue with the speeding down (just want it to spin for ever (I do like that it starts out slow, but not needed).
import { Feather } from '#expo/vector-icons'
import { MotiText } from 'moti'
import React from 'react'
import type { TextStyle } from 'react-native'
import { Colors } from '~/constants/Theme'
type Props = {
color?: TextStyle['color']
size?: number
}
export function LoadingSpinner({ color = Colors['white'], size = 15 }: Props) {
return (
<MotiText
from={{
rotate: '0deg',
}}
animate={{
rotate: '360deg',
}}
transition={{
loop: true,
repeatReverse: false,
type: 'timing',
duration: 5000,
}}
>
<Feather
name="loader"
size={size}
style={{
paddingBottom: 5,
color,
}}
/>
</MotiText>
)
}
I'm guessing that it's type: 'timing', that's the issue, but it seems like I can only do timing and spring
Have you tried adding easing: Easing.linear to transition, where Easing is imported from react-native-reanimated?
I'm currently working with the ViroReact Community Package in React Native to display a video in AR when a specific image is found. However the onTargetFound function of the ViroARImageMarker is not triggered, and the children of the ViroARImageMarker are not displayed.
When I added the onAnchorFound function to the ARScene (parent) the onAnchorFound method was triggered, however the children of the ViroARImageMarker still weren't rendered. Why is the function not triggered and therefore the children not displayed? How do I fix this?
The image is a 12x12cm black card with a bright orange logo (about 3cm) in the center. Neither of the targets are found in the ViroARImageMarker.
Here's my code:
Image Recognition Class
import React, { useEffect, useState } from 'react';
const {
ViroARScene,
ViroARImageMarker,
ViroARTrackingTargets,
ViroAnimations,
ViroVideo,
ViroMaterials,
ViroBox
} = require('#viro-community/react-viro');
const NewViroTracker = () => {
const videoPath = require('#assets/videos/wham.mp4');
const [videoAnimationName] = useState('showVideo');
const [playAnim, setPlayAnim] = useState(false);
function _onAnchorFound(evt: any) {
console.log('Anchor found in Marker :', evt);
setPlayAnim(true);
}
return (
<ViroARScene>
<ViroARImageMarker
target={'inviteCard'}
onAnchorFound={_onAnchorFound}>
<ViroVideo source={videoPath} />
</ViroARImageMarker>
<ViroARImageMarker
target={'logo'}>
<ViroBox position={[0, 0.25, 0]} scale={[0.5, 0.5, 0.5]} />
</ViroARImageMarker>
</ViroARScene>
);
};
ViroARTrackingTargets.createTargets({
inviteCard: {
source: require('#assets/images/invite-card.png'),
orientation: 'Up',
physicalWidth: 0.12 // real world width in meters
},
logo: {
source: require('#assets/images/logo-empty.png'),
orientation: 'Up',
physicalWidth: 0.0287 // real world width in meters
}
});
ViroMaterials.createMaterials({
chromaKeyFilteredVideo: {
chromaKeyFilteringColor: '#00FF00'
}
});
ViroAnimations.registerAnimations({
showVideo: {
properties: { scaleX: 1, scaleY: 1, scaleZ: 1 },
duration: 1000
},
closeVideo: {
properties: { scaleX: 0, scaleY: 0, scaleZ: 0 },
duration: 1
}
});
export default NewViroTracker;
App
import React from 'react';
const { ViroARSceneNavigator } = require('#viro-community/react-viro');
import styled from 'styled-components/native';
import NewViroTracker from 'components/NewViroTracker';
const App = () => {
return (
<ViroWrapper
autofocus={true}
initialScene={{
scene: NewViroTracker
}}
/>
);
};
export default App;
const ViroWrapper = styled(ViroARSceneNavigator)`
flex: 1;
`;
Dependencies:
"#viro-community/react-viro": "^2.21.1",
"react": "17.0.2",
"react-native": "0.66.3",
Description
I'm using react-native-reanimated and when I'm testing, useSharedValue throws an error that it's not a function when using jest and react-native-testing-library. I've mocked react-native-reanimated by using the mock provided as part of the package. I also notice VS Code highlights that reanimated has no exported member useSharedValue, useAnimatedStyle and withTiming, however the component still runs properly without any errors.
Does anyone know what needs to be done to mock it properly?
Code
The Test to see if the component renders
import React from "react";
import { render } from "react-native-testing-library";
import { Switch } from "../src/native/Switch";
describe("Switch Package", () => {
it("renders", () => {
render();
});
});
Mock file which is placed in mocks named react-native-reanimated.js
jest.mock("react-native-reanimated", () => require("react-native-reanimated/mock") );
The Component using Reanimated - Switch.tsx
import { Button } from 'react-native';
import {
useSharedValue,
useAnimatedStyle,
withTiming,
Easing,
} from 'react-native-reanimated';
function Switch() {
const opacity = useSharedValue(0);
const style = useAnimatedStyle(() => {
return {
opacity: withTiming(opacity.value, {
duration: 200,
easing: sing.out(Easing.cubic),
}),
};
});
return (
<Animated.View style={[{width: 100, height: 100, backgroundColor: 'green'}, style]} />
<Button onPress={() => (opacity.value = 1)} title="Hey" />
);
}
Package Versions
React: 16.11.0
React Native: .062.2
React Native Reanimated: 2.0.0-alpha.3
ScreenShots
VS Code Screenshot
Test Error
I have some react-native/expo with native-base code that runs normally on the phone or emulator.
I tried creating a test for it using jest and react-native-testing-library. When doing so, whatever is inside the from native-base is not rendered and cannot be found in the test.
Has anyone been through this and would know a solution so the children of Content are rendered during testing?
An example code is below to illustrate what I am saying.
Thank you very much for the help.
import { render } from 'react-native-testing-library';
import {
Content, Container, Text
} from 'native-base';
class App extends React.Component {
render() {
return (
<Container>
<Content>
<Text testID="textId">Hello</Text>
</Content>
</Container>
);
}
}
describe('Testing Content', () => {
const { queryByTestId } = render(<App />)
it('renders text inside content', () => {
expect(queryByTestId('textId')).not.toBeNull()
});
})
The versions of the packages are:
"expo": "^32.0.0",
"react": "16.5.0",
"native-base": "^2.12.1",
"jest-expo": "^32.0.0",
"react-native-testing-library": "^1.7.0"
I asked the question in the react-native-testing-library in github (https://github.com/callstack/react-native-testing-library/issues/118).
The issue is with react-native-keyboard-aware-scroll-view
To solve it, we can mock it the following way
jest.mock('react-native-keyboard-aware-scroll-view', () => {
const KeyboardAwareScrollView = ({ children }) => children;
return { KeyboardAwareScrollView };
});
I also put an example here for whoever might be looking:
https://github.com/pedrohbtp/rntl-content-bug
Update 2022
I found the solution in their docs:
To fix the above issue, you can simply pass initialWindowMetrics to NativeBaseProvider in your tests.
const inset = {
frame: { x: 0, y: 0, width: 0, height: 0 },
insets: { top: 0, left: 0, right: 0, bottom: 0 },
};
<NativeBaseProvider initialWindowMetrics={inset}>
{children}
</NativeBaseProvider>;