diff --git a/nativescript-bind-elm/src/Native.elm b/nativescript-bind-elm/src/Native.elm
index 0911b51..7771cf1 100644
--- a/nativescript-bind-elm/src/Native.elm
+++ b/nativescript-bind-elm/src/Native.elm
@@ -1,4 +1,4 @@
-module Native exposing (activityIndicator, button, datePicker, formattedString, htmlView, image, label, listPicker, progress, scrollView, span)
+module Native exposing (activityIndicator, button, datePicker, formattedString, htmlView, image, label, listPicker, progress, scrollView, span, searchBar)
 
 import Html exposing (Attribute, Html)
 
@@ -61,3 +61,8 @@ progress =
 scrollView : List (Attribute msg) -> List (Html msg) -> Html msg
 scrollView =
     buildElement "ns-scroll-view"
+
+
+searchBar : List (Attribute msg) -> List (Html msg) -> Html msg
+searchBar =
+    buildElement "ns-search-bar"
diff --git a/nativescript-bind-elm/src/Native/Attributes.elm b/nativescript-bind-elm/src/Native/Attributes.elm
index f287899..670ab4e 100644
--- a/nativescript-bind-elm/src/Native/Attributes.elm
+++ b/nativescript-bind-elm/src/Native/Attributes.elm
@@ -893,3 +893,18 @@ scrollableWidth =
 verticalOffset : String -> Attribute msg
 verticalOffset =
     attribute "vertical-offset"
+
+
+hint : String -> Attribute msg
+hint =
+    attribute "hint"
+
+
+textFieldBackgroundColor : String -> Attribute msg
+textFieldBackgroundColor =
+    attribute "text-field-background-color"
+
+
+textFieldHintColor : String -> Attribute msg
+textFieldHintColor =
+    attribute "text-field-hint-color"
diff --git a/nativescript-bind-res/Native/Constants.res b/nativescript-bind-res/Native/Constants.res
index 181141e..6aa0ddd 100644
--- a/nativescript-bind-res/Native/Constants.res
+++ b/nativescript-bind-res/Native/Constants.res
@@ -264,23 +264,21 @@ let scrollView =
     ]->Belt.Array.map(dashed),
   ]->Belt.Array.concatMany
 
-// Js.log("****************************")
-// [
-//   "horizontalOffset",
-//   "isScrollEnabled",
-//   "orientation",
-//   "scrollBarIndicatorVisible",
-//   "scrollableHeight",
-//   "scrollableWidth",
-//   "verticalOffset",
-// ]
-// ->Belt.Array.map(dashed)
-// ->Belt.Array.forEach(prop =>
-//   Js.log(
-//     `
-// ${camelCased(prop)} =  attribute "${prop}"
-//     `,
-//   )
-// )
+let searchBar =
+  [
+    view,
+    ["hint", "text", "textFieldBackgroundColor", "textFieldHintColor"]->Belt.Array.map(dashed),
+  ]->Belt.Array.concatMany
 
-// Js.log("****************************")
+Js.log("****************************")
+["hint", "text", "textFieldBackgroundColor", "textFieldHintColor"]
+->Belt.Array.map(dashed)
+->Belt.Array.forEach(prop =>
+  Js.log(
+    `
+${camelCased(prop)} =  attribute "${prop}"
+    `,
+  )
+)
+
+Js.log("****************************")
diff --git a/nativescript-bind-res/Native/Elements.res b/nativescript-bind-res/Native/Elements.res
index 169f3f3..a744570 100644
--- a/nativescript-bind-res/Native/Elements.res
+++ b/nativescript-bind-res/Native/Elements.res
@@ -138,6 +138,17 @@ module ScrollView = {
 
   let handler: Types.handler = buildHandler(new, Constants.scrollView, Helper.addView)
 }
+
+module SearchBar = {
+  %%private(
+    @module("@nativescript/core") @new
+    external new: unit => Types.nativeObject = "SearchBar"
+  )
+  let tagName = "ns-search-bar"
+
+  let handler: Types.handler = buildHandler(new, Constants.searchBar, Helper.addView)
+}
+
 let all: array<Types.customElement> = [
   {
     tagName: Label.tagName,
@@ -183,4 +194,8 @@ let all: array<Types.customElement> = [
     tagName: ScrollView.tagName,
     handler: ScrollView.handler,
   },
+  {
+    tagName: SearchBar.tagName,
+    handler: SearchBar.handler,
+  },
 ]
diff --git a/src/Main.elm b/src/Main.elm
index 64e2c70..973c598 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -201,22 +201,9 @@ counter model =
 detailsPage : Model -> Page.Page Msg
 detailsPage model =
     Page.page []
-        (
-            Layout.scrollView [ ]
-            [ -- Event.on "navigatedTo" (D.succeed Destory)
-              Layout.asElement <|
-                Layout.gridLayout [ NA.rows "200 200 200 200 200 200 200 200 200 200" ]
-                    [ Native.label [ NA.row "0", NA.text "row content goes here..." ] []
-                    , Native.label [ NA.row "1", NA.text "row content goes here..." ] []
-                    , Native.label [ NA.row "2", NA.text "row content goes here..." ] []
-                    , Native.label [ NA.row "3", NA.text "row content goes here..." ] []
-                    , Native.label [ NA.row "4", NA.text "row content goes here..." ] []
-                    , Native.label [ NA.row "5", NA.text "row content goes here..." ] []
-                    , Native.label [ NA.row "6", NA.text "row content goes here..." ] []
-                    , Native.label [ NA.row "7", NA.text "row content goes here..." ] []
-                    , Native.label [ NA.row "8", NA.text "row content goes here..." ] []
-                    , Native.label [ NA.row "9", NA.text "row content goes here..." ] []
-                    ]
+        -- Event.on "navigatedTo" (D.succeed Destory)
+        (Layout.stackLayout []
+            [ Native.searchBar [ NA.hint "Enter search term here..", NA.text "Hello" ] []
             ]
         )