View Style Props in Android UI Components

user_1476228 0
Viewed 207

Given an Android Native UI component called MyNativeUIComponent which extends a LinearLayout.

If I want to use View Style Props to set borders or padding, for example:

<MyNativeUIComponent
  style={{
    borderColor: 'red',
    borderWidth: 10,
    width: '100%'
  }}>

</MyNativeUIComponent>

Do I have to expose and implement borderColor, borderWidth, and width as a @ReactProp or @ReactPropGroup properties of MyNativeUIComponent as described here, or does React Native implement these standards properties because MyNativeUIComponent extends LinearLayout ?

Note that if I use styles as described above, it works on iOS but not in Android. I found this question and I tried different suggestions and none of them work.

Note 2: I am creating this question because after reading the documentation is not clear to me if I should expose and manually set every native component's property or not.

react-native android
1 Answers

Follow these steps:

  1. use the below codes in your main xml, the activity_main.xml:

    <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="#dde4dd"
    android:gravity="center"
    android:orientation="vertical">
      <TextView
        android:id="@+id/text"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:background="@drawable/ border "
        android:layout_height="wrap_content" />
</LinearLayout>

  2. In the above code we have taken one text view with background as border so we need to create a file in drawable as boarder.xml and add the below codes:

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
  <solid android:color="@android:color/white" />
  <stroke android:width="1dip" android:color="#4fa5d5"/>
  <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp"/>
</shape>

  3. In the above code we have taken shape as root tag and given shape is rectangle and added width and padding for shape so add the below code to src/MainActivity.java:

        package com.example.andy.myapplication;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import org.w3c.dom.Text;
import java.util.Locale;

public class MainActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  TextView textView=findViewById(R.id.text);
  textView.setText("Tutorialspoint india pvt ltd");
}

Try to run you code and see the result.

user_68777990
Related