I tried to make a custom geofencing, to do this, I display an Url of googlemap and I add a stack with a circle, I had adjust the size with a coefficient to have the good representation. problem my coefficient isn't dynamic with any screen device
Container ( padding: const EdgeInsets.only(top :160.0),
child : new Card(
elevation: 2.0,
child: new Stack(
alignment: AlignmentDirectional.center,
children: <Widget>[
new Container(
child: new Image.network(statichomeMapUri.toString()),
),
FractionalTranslation(
translation: Offset(0.0, 0.0),
child: new Container(
alignment: new FractionalOffset(0.0, 0.0),
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.orangeAccent.withOpacity(0.5),
width: perimetre/3.4, // need to be dynamic
),
shape: BoxShape.circle,
),
),
),
new Container(
//padding: const EdgeInsets.only(bottom:10.0),
margin: new EdgeInsets.all(140.0),
child : Icon(Icons.home, color: Colors.white, size: 25.0),
),
],
),
),
)
Get width of the mobile screen using
MediaQuery.of(context).size.width
And set whatever ratio you want to set
Related
I am trying to use a Gesture handler with a functional component. The problem is when I drag for the second time it's dragging from initial position again
This is my code below
let translateXRef = useRef(new Animated.Value(0)).current;
const onGestureEvent = useCallback(
Animated.event(
[
{
nativeEvent: {
translationX: translateXRef,
},
},
],
{ useNativeDriver: true }
),
[]
);
<View
style={{
backgroundColor: '#FFFFFF80',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
height: 100,
}}
>
<PanGestureHandler
onGestureEvent={onGestureEvent}
onHandlerStateChange={onHandlerStateChange}
>
<Animated.View
// eslint-disable-next-line react-native/no-inline-styles
style={{
height: '100%',
width: 10,
backgroundColor: AppColors.buttonColor,
transform: [{ translateX: translateXRef }],
}}
/>
</PanGestureHandler>
</View>
You need to use the context in addition to the event in your callback.
I'm not sure why you're using the Animated.event. You should generate your callbacks using the useAnimatedGestureHandler.
Each of those callbacks onStart, onActive, onEnd, etc... take an event and context argument.
The context argument is an object that would let you set your previous position so that then next click would not reset the position.
Here's more info:
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/events/#using-context
Also, a pretty good video that explains it:
https://youtu.be/4HUreYYoE6U
I am having problem. I want to add shadows to the border of a view, like here: https://github.com/styled-components/styled-components/issues/709
I have tried with styled-components and with normal style prop.
I currently have:
const shadow = {
shadowOffset:{ width: 10, height: 10, },
shadowColor: 'black',
shadowOpacity: 1.0,
shadowRadius: 8,
};
...
<View style={shadow}>
<TotalText>SALDO</TotalText>
<MoneyText>R$ 1.000,00</MoneyText>
<NextAllowanceText>PRÓXIMA MESADA</NextAllowanceText>
</View>
This is the output: https://ibb.co/b6xOYp
I want the shadow to be applied to the border and not the content inside, what am I missing?
Try setting the background colour of the view to white - backgroundColor: 'white'
I want to make a simple screen that shows multiple TextFields in a Column, some content above and a button below. On my first attempt, without the SingleChildScrollView, I got an "renderflex overflowed" error which could be solved by placing the TextField within the SingeChildScrollView.
Now I have the problem that the SingleChildScrollView is placed way too high on my screen when I select any TextField and the keyboard pops up. I want it to stay basically just where it is since there is enough (yellow) room for the keyboard below the SingleChildScrollView.
This Gif shows how my app behaves.
This Gif shows the behavior that I would expect.
I tried applying code from the FlatApp-Flutter example to my app but was unable to find the part that actually fixes my issue.
Does anyone know how I can control how much the keyboard pushes the SingleChildScrollView up or how I can fix the issue? Thanks a lot.
Scaffold(
backgroundColor: Colors.yellow,
body: new SingleChildScrollView(
controller: _scrollController,
child: new Container(
margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
color: Colors.orange,
child: new Column(children: <Widget>[
new Container(
margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 20.0),
height: 200.0,
width: 200.0,
color: Colors.grey,
child: new Center(
child: Text("Show some stuff"),
),
),
new Container(
color: Colors.blue,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new TextField(
decoration: InputDecoration(labelText: "Label 1"),
),
new TextField(
decoration: InputDecoration(labelText: "Label 2"),
),
],
),
),
new RaisedButton(
child: const Text('Start'),
color: Theme.of(context).accentColor,
textColor: Colors.white,
elevation: 4.0,
splashColor: Colors.blueGrey,
onPressed: () {
// Perform some action
//button1(context);
},
),
]),
)));
}
I fixed it. When implementing my navigation, I unintentionally placed my Scaffold inside the body of another Scaffold, so my structure was like this:
Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: ScaffoldShownInMyQuestion(),
)
Returning just the SingleChildScrollView without the second Scaffold wrapping around it and using that as body fixed my problem.
Here i have total 10 legends, but i want to show all 10 legends.
As WhiteHat mentions in his comment, you have to move the legend.position to the top and increase the maxLines.
But additionally, you have to add the top property to the chartArea, to get enough space at the top of the chart.
{
width: '100%',
height: '100%',
legend: {
position: 'top', // <--- top position
alignment: 'center',
maxLines: 5 // <--- increase of max lines
},
chartArea: {
height: "100%",
width: "100%",
top: "25%" // <-- top space (you can use fix values as well. (e.x. 50))
},
sliceVisibilityThreshold: 0,
pieHole: 0.4,
}
I need to make my View circular on a non solid colored background.
I tried using borderRadius and overflow: 'hidden', but it isn't working. I see that this is a known issue with React Native: https://github.com/facebook/react-native/issues/3198
There seems to be workarounds for images that are on top of a solid background, but my background is dynamic and on top of an image so therefore I can't hardcode it.
Are there any alternatives to get something like this to work?
The black square should be a circle:
Here's the code (P.S. I'm using react native webrtc, that's where I'm getting RTCView, but I think this works with a plain old View):
const styles = StyleSheet.create({
remoteVideoContainer: {
borderRadius: 50,
height: 100,
marginBottom: 20,
width: 100,
overflow: 'hidden',
backgroundColor: 'green',
},
video: {
flex: 1,
resizeMode: 'cover',
backgroundColor: 'blue',
},
});
export default VideoView = ({
videoURL,
}) => {
return (
<View style={styles.remoteVideoContainer}>
<RTCView
style={styles.video}
streamURL={videoURL}
mirror={true}
objectFit="cover"
/>
</View>
);
};
I'm not even sure if you can style the RTCView. The code doesn't expose a styling prop. https://github.com/oney/react-native-webrtc/blob/master/RTCView.js