layout - Reactive Native: place view bellow another centered view -


i used lot using android relative layouts:

 +-----------+   |           |<- parent view  |           |  |  +-----+  |  |  |     | <--- centered   |  |     |  |   child view  |  +-----+  |  |   [xxx] <---- view positioned  |           |   bellow centered  +-----------+   child view

is possible achieve same in react-native?

i did similar today this: 

                <view style={{ flex: 1 }}>                     <view style={{                         height: 350,                          backgroundcolor: "blue"                     }}>                      <view style={{                         backgroundcolor: "red",                          height: 100,                          width: 100,                          position: "absolute",                          top: "50%",                          left: "50%",                          marginleft: -50, // half width of child                         margintop: -50 // half height of child                     }}>                         <text>hello...</text>                     </view>                      <view style={{                          backgroundcolor: "green",                          height: 30,                          width: 100,                          position: "absolute",                          top: "50%",                          left: "50%",                          marginleft: -50, // half width of child                         margintop: 70 // controls how far down center child                     }}>                         <text>...world</text>                     </view>                 </view>

this require know size of elements inside parent can correctly set marginleft , margintop values on children.


Comments

Post a Comment

Popular posts from this blog

javascript - Confirm a form & display message if form is valid with JQuery -

i'm developing django application , use javascript in order improve website. i have form , display 2 things : confirm form before submit if form submitted, display message : 'form saved' it's first time i'm using js , need make process. this code : <form class = "form" method='post' action=''> {% csrf_token %} <br></br> {{ form.as_p}} <br></br> <button type="submit">valider</button> </form> <script> $('#form').submit(function() { var c = confirm("click ok continue?"); return c; //you can return c because true or false }); </script> and if form valid , saved : <script type="text/javascript" > $(document).on('valider', 'form.form', function(form) { var $form = $(form); $.ajax({ ...
Read more

Retrieving ETA (estimated time of arrival) with Google Distance Matrix API and public transit as transport mode -

Image
is possible retrieve eta google's distancematrix api (or alternative api). fyi, eta different duration, when using public transport. following example clarify request. when leave on friday @ 8.15 i'll able catch train @ 8.30 , arrive @ 9.00 am. google says duration 30 minutes. however, when leave on saturday @ 8.15 i'll able catch first train @ 9.00 , arrive @ 9.30 am. google still says duration 30 minutes, means ignore delay. google map supports functionality there api around giving me eta instead of duration. can see, distance-matrix' response no good. clarifying question little. eta estimated time of arrival , it's clear user wants know entire duration of transport (including waiting time public transport).
Read more

android - ConstraintLayout: Realign baseline constraint in case if dependent view visibility was set to GONE -

Image
is there way realign baseline constraint textview in case if dependent view visibility set gone? my layout code: <android.support.constraint.constraintlayout android:layout_width="match_parent" android:layout_height="wrap_content"> <textview android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="test title" android:textcolor="@color/black" android:textsize="24sp" app:layout_constraintleft_toleftof="parent" app:layout_constraintright_torightof="parent"/> <textview android:id="@+id/subtitle1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="subtitle 1" android:textsize="11sp" app:layout_constraintb...
Read more